vue-pdf 通过文件流预览pdf文件

本文介绍了如何在Vue项目中使用vue-pdf组件通过文件流方式预览PDF,以避免因跨域引发的问题。首先,需要安装vue-pdf库,然后在模板中正确引入并配置,通过获取文件流来展示PDF内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用过vue-pdf的同志应该都知道,如果拿到的是一个pdf的在线链接在使用这个的时候会出现一个跨域问题。而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。
首先,下载vue-pdf

npm install vue-pdf -D

其次,模板里面引入vue-pdf

import pdf from 'vue-pdf'

html:

<pdf :src="src"></pdf>

相关js:

 // 初始化获取pdf文件
      getPdfCode () {
        let that = this;
        axios({
          method: 'get',
          url: '请求的URL',
          headers: {
            'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          },
          responseType: 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
        }).then(response => {
          that.src  = that.getObjectURL(response.data);
        }).catch(function (error) {
          console.log(error);
        });
      },

      // 将返回
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值