一：pdf.js使用
1：下載pdf
j進(jìn)入pdf.js官網(wǎng)地址：https://mozilla.github.io/pdf.js/getting_started/#download
下載所需要的pdf版本
下載pdf.png
2：將下載的pdf文件放入項(xiàng)目靜態(tài)文件中裸违，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的地址鏈接
二：跨域問題
我們在日常項(xiàng)目中常見一種業(yè)務(wù)場景，那就是我們上傳的文件會被放在一個(gè)文件服務(wù)器裸诽，和項(xiàng)目的服務(wù)器不在同一個(gè)域名下胶逢，那么就會出現(xiàn)跨域問題同云≡劭郏控制臺會報(bào)下面的錯(cuò)誤
跨域.png
那么如何解決呢缩多？個(gè)人認(rèn)為有三種，但是本身只嘗試了兩種养晋，第三種需要各位客官自己去嘗試下
1：配置CORS跨域（簡單粗暴）
在目標(biāo)服務(wù)器頭部配置以下方法支持跨域即可
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 = '目標(biāo)服務(wù)器地址以及端口/demo.pdf'
此方案簡單粗暴衬吆，但是在某種程度上可能會導(dǎo)致安全性問題
2：使用文件流的方式
此方案需要后臺配合通過接口將pdf轉(zhuǎn)成文件流的方式返回給前端
接口調(diào)用
var res = await getBlob({
fileName: fileName
})
this.filePath = encodeURIComponent(this.getObjectURL(res));
// 將返回的流數(shù)據(jù)轉(zhuǎn)換為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需要設(shè)置為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
});
};
此方案有一個(gè)弊端绳泉，就是當(dāng)文件過大的時(shí)候逊抡，渲染會占用時(shí)間過長，所以如果文件過大零酪，建議采用分片切割獲取方式來展示冒嫡。（在此感謝陽哥提醒）
3：使用nginx配置代理
此方案暫時(shí)沒有嘗試，所以不過多說明四苇，各位看官可以自行嘗試
nginx配置
location /files {
proxy_pass 目標(biāo)服務(wù)器以及端口/;
}
頁面使用
this.filePath = '/demo.pdf'
三：查看頁面
按照上面的方案打開頁面孝凌，會發(fā)現(xiàn)控制臺依舊報(bào)錯(cuò)，原因是pdf源碼做了一個(gè)處理月腋，所以只需要將viewer.js的以下代碼注釋掉即可
if (origin !== viewerOrigin && protocol !== "blob:") {
throw new Error("file origin does not match viewer's");
}
至此pdd.js以及跨域問題解決完畢蟀架。
