uniapp H5预览PDF文件（支持url和base64）

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方法

7.3 提供下修改后的pdf.js

Git下载地址