使用PDF.js踩坑记~

想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！

项目场景：

目前遇到需求，需要在pc端打开pdf预览

---

解决方案：

发现有许多成熟的方案，最终决定使用PDF.js进行开发

首先先在官网下载

http://mozilla.github.io/pdf.js/getting_started/#download

下载完成后目录结构是这样：

我们打开web后点击：

这里有一个坑，我怎么都打不开，结果最后发现是因为需要启动服务才能使用这里我使用的是live-server这个npm组件启动

这时候他会有个默认的pdf展示：compressed.tracemonkey-pldi-09.pdf

默认读取的是这里，如果我们要使用自己的文件需要把这个地方删除为空

删除后回读取url上的文件地址：web/viewer.html?file=XXX

如果需要加载远程服务器的pdf文件，远程服务器返回pdf文件流，然后在viewer.html的url后面添加file=http://127.0.0.1:8020/PDF/test,但是pdf.js不支持跨域请求，所以会报错：file origin does not match viewer’s，试了很多种方法仍然报错，所以简单粗暴的方法就是把viewer.js的判断远程地址的代码注释掉即可。

注释viewer.js的代码：

    if (fileOrigin !== viewerOrigin) {
    
    
      throw new Error('file origin does not match viewer\'s');
 }

这里我的pdf文件不是放在静态目录中，而是根据接口动态获取，我的下载方法是有两个参数的如：

http://127.0.0.1/downloadfile?fileid=123&fileName=XXX.pdf

那么就导致链接中会有两个问号导致一直获取不到文件

http://127.0.0.1:8080/web/index.html?file=http://127.0.0.1/downloadfile?fileid=123&fileName=XXX.pdf

最后我是改造了接口，坑~

http://127.0.0.1:8080/web/index.html?file=http://127.0.0.1/downloadfile/123/XXX.pdf