vue3用pdfjs-dist去解析pdf

Vue3中使用PDF.js库（pdfjs-dist）解析PDF文件通常涉及以下几个步骤：

1. **安装依赖**：首先需要在项目中安装pdfjs-dist库。如果你使用npm或yarn，可以在命令行运行：
- `npm install pdfjs-dist`
或
- `yarn add pdfjs-dist`

2. **引入库**：在Vue组件中，通过`import`语句引入pdfjs模块：

   import * as PDFJS from 'pdfjs-dist';

3. **加载PDF**：创建一个函数来加载PDF，这通常涉及到从服务器或本地获取PDF数据：

   async function loadPDF(url) {
     const loadingTask = PDFJS.getDocument(url);
     await loadingTask.promise;
     return loadingTask;
   }

4. **解析PDF**：当PDF文档加载完成后，可以遍历每一页并渲染它们：

   async function renderPage(page) {
     const viewport = page.getViewport({ scale: 1 });
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');

     // 设置canvas大小
     canvas.width = viewport.width;
     canvas.height = viewport.height;

     // 渲染到canvas上
     await page.render({
       canvasContext: context,
       viewport: viewport,
     });

     // 将canvas添加到页面中或做其他处理
     document.getElementById('pdf-canvas').appendChild(canvas);
   }

   // 调用loadPDF获取文档，然后获取每一页并渲染
   const doc = await loadPDF('your-pdf-url-or-file-path');
   for (let i = 1; i <= doc.numPages; i++) {
     doc.getPage(i).then(renderPage);
   }

5. **错误处理**：记得处理可能出现的错误，比如网络请求失败或PDF文件格式不正确。