vue2+ element ui 集成pdfjs-dist

2025/5/11 1:35:55 来源：https://blog.csdn.net/WuKongHeBaJie/article/details/143746491 浏览: 次关键词：vue2+ element ui 集成pdfjs-dist

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>