1. 下载Pdf.js

1.1 下载

下载链接（官方）需要进行以下配置：https://mozilla.github.io/pdf.js/

下载以后得到一个文件夹

1.2 修改配置

1.2.1 将pdfjs-3.8.162-dist复制到项目中

复制到public目录下 不要放在src目录下 否则会造成一些不必要的异常

1.2.2 解决跨域问题

pdfjs-3.8.162-dist/web/viewer.js 中注释掉以下代码

1.2.3 将pdf.worker.js文件复制到public目录下

pdfjs-3.8.162-dist/build/pdf.worker.js

在复制后的pdf.worker.js文件中添加以下代码

module.exports = {configureWebpack: {module: {rules: [{test: /\.worker.js$/,use: { loader: 'worker-loader' }}]}}
}

以上代码中用到了worker-loader需要安装worker-loader

npm install worker-loader@3.0.8 --registry=https://registry.npmmirror.com

1.2.4 安装 pdfjs-dist

npm install pdfjs-dist@2.6.347 --registry=https://registry.npmmirror.com

1.2.5 前端vue代码(示例)

<template><div><iframe :src="url" name="PDF报告" style="width: 100%; height: 90vh;" /></div>
</template><script>
export default {name: 'PDF',data() {return {url: ''}},mounted() {this.getPdf()},methods: {// 获取pdfasync getPdf() {this.url = `/pdfjs-3.8.162-dist/web/viewer.html?file=${encodeURIComponent('修改为自己的pdf链接')}`}}
}
</script>

3. 参考资料

链接: https://juejin.cn/post/7260313574378537019