vue3使用pdf.js转img预览

在Vue 3中使用PDF.js库来预览PDF文件并将其转换为图片可以分为以下几个步骤：

1. 安装依赖：首先需要安装`pdfjs-dist`库，这包含了PDF.js的核心功能。你可以通过npm或yarn来安装：

   npm install pdfjs-dist vue-file-loader @vue/composition-api --save
   # 或者
   yarn add pdfjs-dist vue-file-loader @vue/composition-api

2. 引入并配置：在项目中引入pdf.js，并配置`vue-file-loader`处理PDF文件，使得它们可以在浏览器中加载：

   import { createWebWorkerPDFViewer } from 'pdfjs-dist';
   import FileLoader from 'vue-file-loader';

   Vue.use(FileLoader);

3. 使用Composition API创建组件：创建一个组件，利用`setup()`钩子获取PDF内容，并使用Web Worker来预览和转换PDF：

   import { ref, onMounted } from '@vue/composition-api';

   setup() {
     const file = ref(null); // PDF文件对象

     async function previewPDF(fileInput) {
       if (!fileInput || !fileInput.files || !fileInput.files[0]) return;

       const fileReader = new FileReader();
       fileReader.onload = (event) => {
         const blob = event.target.result;
         createWebWorkerPDFViewer({
           pdfUrl: URL.createObjectURL(blob),
         }).then((viewer) => {
             // 获取页面转换后的canvas
             viewer.getPage(1).then((page) => {
               page.render({
                 canvasContext: document.createElement('canvas').getContext('2d'),
               }).promise.then((canvas) => {
                 // 将canvas转换为Image对象，然后设置到DOM上
                 const img = document.createElement('img');
                 img.src = canvas.toDataURL('image/jpeg');
                 document.body.appendChild(img);
               });
             });
           });
       };
       fileReader.readAsArrayBuffer(fileInput.files[0]);
     }

     // 组件内使用
     onMounted(() => {
       // 监听文件上传事件
       file.onFileChange = (e) => {
         previewPDF(e.target);
       };
     });

     return {
       file,
     };
   }

4. HTML模板中绑定文件输入元素：

   <input type="file" @change="previewPDF(file)" v-model="file">

这样，当你选择一个PDF文件后，它会被转换成一张图片并在页面上显示。