1、下载pdf.js
官网下载： pdf.js
这里的pdf.js运行起来可能会有问题，在文章末尾有解决方法
下载pdf.js
2、工程中放入pdf.js
在工程根目录下创建hybrid文件夹，再创建html文件夹，将解压的pdf.js放入html文件夹中（这里的文件夹路径，应该也可以自行定义，对应好viewer.html路径即可）
pdf.js存放路径
3、代码中定义base64转blob方法
如果不是base64类型的可以不用定义
base64ToBlob(base64Data) {
let arr = base64Data.split(','),
fileType = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
l = bstr.length,
u8Arr = new Uint8Array(l);
while (l--) {
u8Arr[l] = bstr.charCodeAt(l);
}
return new Blob([u8Arr], {
type: fileType
});
}
4、定义变量
viewerUrl: '/hybrid/html/web/viewer.html', // pdf.js的viewer.html所在路径
pdfUrl: '' // 最终显示在web-view中的路径
5、定义页面
<template>
<web-view :src="pdfUrl"></web-view>
</template>
6、pdf赋值
base64类型
const base64Str = ''; // 这里是获取的base64值
let result = base64Str.replace(/[\r\n]/g, "");
let pdfBase64 = `data:application/pdf;base64,${result}`;
let pdf = URL.createObjectURL(this.base64ToBlob(pdfBase64)); // base64ToBlob就是第3步定义的方法
this.pdfUrl = `${this.viewerUrl}?file=${encodeURIComponent(pdf)}`;
url类型
const urlStr = ''; // 这里是获取的url值
this.pdfUrl = `${this.viewerUrl}?file=${encodeURIComponent(urlStr)}`;
7、遇到的一些问题
7.1 跨域问题
在viewer.js文件中注释下方代码块即可，可以全局搜索file origin does not match viewer's
跨域问题报错信息
注释下方代码块
7.2 不支持.at()语法问题
全局搜索.at(，将at替换成slice即可，这里会有很多，仔细查找就行
语法错误报错信息
at方法换成slice方法
