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

在vue3中使用pdfjs-dist预览pdf文件，需要进行以下配置：

1. 首先，在项目的根目录下找到vue.config.js文件，如果没有则可以手动创建。

2. 打开vue.config.js文件，添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pdf')
      .test(/\.pdf$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
      .end()
  }
}

3. 保存文件并重启项目。

4. 在你的Vue组件中，可以使用以下代码来引入pdf文件并预览：

import pdfjs from 'pdfjs-dist/build/pdf';

export default {
  data() {
    return {
      pdfData: null
    };
  },
  mounted() {
    const pdfPath = require('@/assets/example.pdf'); // 替换为你的pdf文件路径
    pdfjs.getDocument(pdfPath)
      .promise.then((pdf) => {
        const pageNumber = 1; // 需要显示的页码
        pdf.getPage(pageNumber).then((page) => {
          const canvas = this.$refs.pdfCanvas; // 替换为你的canvas元素的ref名
          const context = canvas.getContext('2d');
          const viewport = page.getViewport({ scale: 1 });
          canvas.width = viewport.width;
          canvas.height = viewport.height;

          page.render({
            canvasContext: context,
            viewport: viewport
          });
        });
      });
  }
};