目录
- 1. 下载Pdf.js
- 1.1 下载
- 1.2 修改配置
- 1.2.1 将pdfjs-3.8.162-dist复制到项目中
- 1.2.2 解决跨域问题
- 1.2.3 将pdf.worker.js文件复制到public目录下
- 1.2.4 安装 pdfjs-dist
- 1.2.5 前端vue代码(示例)
- 3. 参考资料
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