PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blob地址预览
ViewerJS: http://viewerjs.org/ 预览pdf文件，其pdf文件只能url地址
这个项目是基于vue的，但发现实现起来可以忽略，直接把官网 下载的文件，build文件夹和web文件夹全都放在项目的static文件夹下，
我在实现功能时，看了一些其余博客都是要把viewer.js里面的
varDEFAULT_URL='compressed.tracemonkey-pldi-09.pdf' 这个里面是PDF的路径删除该变量定义;
这一步我没有操作最后也实现功能。
有些人是在view.html里面直接加代码段什么的，但是我这个项目是要在某个组件里面，选择符合条件的订单才能预览pdf，所以我把有关view.html里面操作的相关方法都pass掉了。
然后调取后台接口，发现几个问题
直接在Network里面看的图
接口返回的数据
两者的内容完全不一样，通过查资料发现，我的脚手架里面
// 设置默认返回数据类型 axiosIns.defaults.responseType ='json'
于是我在调接口的时候要改变类型，刚开始我设置成了blob，还有arrayBuffer发现都不对，后来还是在network里面查看了一下，发现后台需要的是另外一个，于是如下操作
responseType:"multipart/form-data"
这样拿到的data值和看到的就是一样的，就是所谓的文件流
最开始我的想法是，把拿到的文件流转化为url地址就可以了，，用了window.url.createObjecturl这个方法，发现报错了
let pdfurl=window.url.createobjecturl(data.data);
console.log(pdfurl);
window.url.createObjecturl方法报错
后来又找解决方法，发现要这么写：
var binaryData = [];
binaryData.push(data.data);
this.url =window.URL.createObjectURL(new Blob(binaryData, {type:"application/zip"}));
console.log(this.url);
blob:http://localhost:8080/c680cd37-19d5-41af-bbb7-747ca0c3b39a
以blob:开关的url地址
注： 这个方法对浏览器版本有要求
支持版本
在控制台验证所使用浏览器是否支持window.url.createObjectURL
写到这儿以为成功了，最后出现的pdf，页码和后台实现的页数一样，但是每一页都是空白。
后来去网上找，发现没有人出现过这种情况，尝试了解决，还是解决不了。
于是，准备换思路。
直接把文件流当作地址赋值过去，
window.open('/static/pdf/web/viewer.html?file=' +encodeURIComponent(this.url));
这里的this.url是整个调取接口完整的值，
加了encodeURlComponent()是因为接口里会出现 export?id=213这种形式的
如果有export?id=123&aa=123这种的最后加上 &.pdf 至于原理可以去搜一下
这个时候会出现
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.viewer.js:1352 Uncaught (in promise) Error: 意外的服务器响应。 at viewer.js:1352 at
PDF.js v1.9.426 (build: 2558a58d)
信息：Unexpected server response (0) while retrieving PDF
看到资料上说，本地有跨域问题去了线上就可以了，于是我就发版了，然后发现线上显示地址错误404，由此可以看出我地址出错了
后来一直改地址，我的线上地址是https://aaaaaa/bbbb/#/
于是我又把原来的地址改动了一下，
window.open('/bbbb/static/pdf/web/viewer.html?file=' +encodeURIComponent(this.url));
然后本地运行是404，但是发到线上就能成功打开pdf.js文件了。
不容易啊，里面有好多坑，别人的博客可以借鉴，不过每个人遇到的问题还是有点区别的。
看了这么多博客，有一篇对我帮助最大，在这里放上地址。
https://blog.csdn.net/shentibeitaokong/article/details/80011900
网友评论