vue项目使用pdf以及解决pdf.js不支持跨域问题

一：pdf.js使用

1：下载pdf

j进入pdf.js官网地址：https://mozilla.github.io/pdf.js/getting_started/#download
下载所需要的pdf版本

下载pdf.png

2：将下载的pdf文件放入项目静态文件中，vue3.0的话放入到public下，如果是vue2.x版本直接放在根目录的static下

文件放入.png

3：页面使用

<iframe :src="'/static/js/pdf/web/viewer.html?file=' + filePath" width="100%" height="100%"></iframe>

其中file为pdf的地址链接

二：跨域问题

我们在日常项目中常见一种业务场景，那就是我们上传的文件会被放在一个文件服务器，和项目的服务器不在同一个域名下，那么就会出现跨域问题。控制台会报下面的错误

跨域.png

那么如何解决呢？个人认为有三种，但是本身只尝试了两种，第三种需要各位客官自己去尝试下

1：配置CORS跨域（简单粗暴）

在目标服务器头部配置以下方法支持跨域即可

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Expose-Headers: Accept-Ranges, Content-Encoding, Content-Length, Content-Range

使用方法方法

this.filePath = '目标服务器地址以及端口/demo.pdf'

此方案简单粗暴，但是在某种程度上可能会导致安全性问题
2：使用文件流的方式
此方案需要后台配合通过接口将pdf转成文件流的方式返回给前端
接口调用

var res = await getBlob({
       fileName: fileName
 })
this.filePath = encodeURIComponent(this.getObjectURL(res));

// 将返回的流数据转换为url
    getObjectURL (file) {
      var binaryData = [];
      binaryData.push(file);
      let url = null;
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
        } catch (error) {

        }
      } else if (window.URL !== undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
        } catch (error) {

        }
      }
      return url;
    }

注：请求接口的responseType需要设置为bolb,否则页面渲染出来后是一片空白，请求方法如下

export const getBlob = (data) => {
  return originAxios({
    url: `${config.baseURL}/xxxxx`,
    method: 'get',
    params: data,
    responseType: 'blob',
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: localStorage.userToken
    },
    withCredentials: true
  });
};

此方案有一个弊端，就是当文件过大的时候，渲染会占用时间过长，所以如果文件过大，建议采用分片切割获取方式来展示。（在此感谢阳哥提醒）

3：使用nginx配置代理

此方案暂时没有尝试，所以不过多说明，各位看官可以自行尝试
nginx配置

location /files {
  proxy_pass 目标服务器以及端口/;
}

页面使用

this.filePath = '/demo.pdf'

三：查看页面

按照上面的方案打开页面，会发现控制台依旧报错，原因是pdf源码做了一个处理，所以只需要将viewer.js的以下代码注释掉即可

if (origin !== viewerOrigin && protocol !== "blob:") {
    throw new Error("file origin does not match viewer's");
}

至此pdd.js以及跨域问题解决完毕。

最后编辑于：2020.06.24 09:34:51