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

用过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);
        });
      },

      // 将返回的流数据转换为url
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          try {
            url = window.webkitURL.createObjectURL(file);
          } catch (error) {

          }
        } else if (window.URL != undefined) { // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {

          }
        }
        return url;
      },
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页