PDFJS:?https://mozilla.github.io/pdf.js/? ???支持獲取文件流到客戶端，生成blob地址預覽
ViewerJS:?http://viewerjs.org/? ?預覽pdf文件，其pdf文件只能url地址
這個項目是基于vue的，但發(fā)現(xiàn)實現(xiàn)起來可以忽略，直接把官網(wǎng) 下載的文件，build文件夾和web文件夾全都放在項目的static文件夾下，
我在實現(xiàn)功能時，看了一些其余博客都是要把viewer.js里面的
varDEFAULT_URL='compressed.tracemonkey-pldi-09.pdf'? 這個里面是PDF的路徑刪除該變量定義;
這一步我沒有操作最后也實現(xiàn)功能。
有些人是在view.html里面直接加代碼段什么的，但是我這個項目是要在某個組件里面，選擇符合條件的訂單才能預覽pdf，所以我把有關view.html里面操作的相關方法都pass掉了。
然后調(diào)取后臺接口，發(fā)現(xiàn)幾個問題
兩者的內(nèi)容完全不一樣，通過查資料發(fā)現(xiàn)，我的腳手架里面
// 設置默認返回數(shù)據(jù)類型? ? axiosIns.defaults.responseType ='json'
于是我在調(diào)接口的時候要改變類型，剛開始我設置成了blob，還有arrayBuffer發(fā)現(xiàn)都不對，后來還是在network里面查看了一下，發(fā)現(xiàn)后臺需要的是另外一個，于是如下操作
responseType:"multipart/form-data"
這樣拿到的data值和看到的就是一樣的，就是所謂的文件流
最開始我的想法是，把拿到的文件流轉化為url地址就可以了，，用了window.url.createObjecturl這個方法，發(fā)現(xiàn)報錯了
let pdfurl=window.url.createobjecturl(data.data);
console.log(pdfurl);
后來又找解決方法，發(fā)現(xiàn)要這么寫：
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地址
注： 這個方法對瀏覽器版本有要求?
寫到這兒以為成功了，最后出現(xiàn)的pdf，頁碼和后臺實現(xiàn)的頁數(shù)一樣，但是每一頁都是空白。
后來去網(wǎng)上找，發(fā)現(xiàn)沒有人出現(xiàn)過這種情況，嘗試了解決，還是解決不了。
于是，準備換思路。
直接把文件流當作地址賦值過去，
window.open('/static/pdf/web/viewer.html?file=' +encodeURIComponent(this.url));
這里的this.url是整個調(diào)取接口完整的值，
加了encodeURlComponent()是因為接口里會出現(xiàn) export?id=213這種形式的
如果有export?id=123&aa=123這種的最后加上 &.pdf 至于原理可以去搜一下
這個時候會出現(xiàn)
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
看到資料上說，本地有跨域問題去了線上就可以了，于是我就發(fā)版了，然后發(fā)現(xiàn)線上顯示地址錯誤404，由此可以看出我地址出錯了
后來一直改地址，我的線上地址是https://aaaaaa/bbbb/#/
于是我又把原來的地址改動了一下，
window.open('/bbbb/static/pdf/web/viewer.html?file=' +encodeURIComponent(this.url));
然后本地運行是404，但是發(fā)到線上就能成功打開pdf.js文件了。
不容易啊，里面有好多坑，別人的博客可以借鑒，不過每個人遇到的問題還是有點區(qū)別的。
看了這么多博客，有一篇對我?guī)椭畲?，在這里放上地址。
https://blog.csdn.net/shentibeitaokong/article/details/80011900
