vue3写一个预览pdf文件功能

在Vue3中预览PDF文件，可以使用pdf.js库。以下是实现步骤：

1. 安装pdf.js库：可以使用npm安装，命令为：`npm install pdfjs-dist`

2. 在Vue3组件中引入pdf.js库：在组件的`<script>`标签中添加以下代码：

   import pdfjsLib from 'pdfjs-dist/webpack';
   pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

这里，我们将pdf.js库引入，并将全局的worker路径设置为cdn地址。

3. 在组件的`<template>`标签中添加一个`<canvas>`标签，用于显示PDF文件内容：

   <canvas ref="pdfCanvas"></canvas>

这里，我们使用Vue3的ref属性获取canvas元素的引用。

4. 在Vue3组件中添加以下代码，用于加载并预览PDF文件：

   async loadPdf() {
     const url = 'https://example.com/sample.pdf'; // PDF文件的url地址
     const canvas = this.$refs.pdfCanvas; // 获取canvas元素的引用
     const loadingTask = pdfjsLib.getDocument(url); // 加载PDF文件
     const pdf = await loadingTask.promise; // 等待PDF文件加载完成
     const page = await pdf.getPage(1); // 获取第一页
     const viewport = page.getViewport({ scale: 1.0 }); // 获取视口
     canvas.height = viewport.height; // 设置canvas高度
     canvas.width = viewport.width; // 设置canvas宽度
     const renderContext = {
       canvasContext: canvas.getContext('2d'),
       viewport: viewport
     };
     await page.render(renderContext).promise; // 渲染第一页
   }

这里，我们首先设置PDF文件的url地址，然后获取canvas元素的引用和PDF文件对象。接着，我们获取第一页并获取视口大小，然后设置canvas的大小。最后，我们使用renderContext将第一页渲染到canvas中。

注意：在实际使用中，需要根据PDF文件的页数循环渲染每一页。

5. 最后，在组件的`created`钩子函数中调用`loadPdf`方法，即可预览PDF文件：

   export default {
     created() {
       this.loadPdf();
     },
     methods: {
       async loadPdf() {
         // ...
       }
     }
   }

这里，我们在组件创建时调用`loadPdf`方法，实现PDF文件的预览。