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: {
    // 获取pdf
    async getPdf() {
      this.url = `/pdfjs-3.8.162-dist/web/viewer.html?file=${encodeURIComponent('修改为自己的pdf链接')}`
    }
  }
}
</script>

3. 参考资料

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