vue3中使用pdfjs-dist预览pdf，vue.config.js配置pdf文件

参考博文：

1.pdfjs-dist        https://juejin.cn/post/6995856687106261000

2.vue.config.js配置    https://ask.csdn.net/questions/7425984

遇到问题：

1.vue-pdf在vue3项目中引入时报错，似乎是不支持。所以选择了pdfjs-dist。

2.在引入pdf文件时报错

 解决：配置vue.config.js中对pdf文件的支持。

const path = require('path');

module.exports = {

    publicPath: "./", // 构建好的文件输出到哪里

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败

    assetsDir: 'assets',

    transpileDependencies:['@vue/reactivity'],

    chainWebpack: config => {
        // ...
        config.module.rule('pdfjs-dist').test({
         test: /\.js$/,
         include: path.join(__dirname, 'node_modules/pdfjs-dist')
       }).use('babel-loader').loader('babel-loader').options({
         presets: ['@babel/preset-env'],
         plugins: ['@babel/plugin-proposal-optional-chaining']
       })

//-------------------------- 配置pdf文件----------------------------------------
       config.module
       .rule('pdf')
       .test(/\.(pdf)$/)
       .use('url-loader')
       .loader('url-loader')
       .options({
         limit: 10000
       })
       .end()
//-------------------------- 配置pdf文件----------------------------------------
     },
};

3.注意：

需要在引入 pdfjs-dist 之后配置 workerSrc ，但是引入 pdfjs-dist/build/pdf.worker.entry 之后浏览器还是有个警告：Warning: Setting up fake worker. ，经过各种原因查找，最终找到了一句描述：pdf.worker.js必须位于自己的文件中（而不是与pdf.js捆绑在一起）。否则它不能在服务工作线程中运行。

解决方式：将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下。

以下是组件全部代码：