vue3 h5 如何预览 上传的pdf 文件链接

在 Vue3 中，如果你想让用户在 H5 页面上预览上传的 PDF 文件，你可以使用一些前端库来实现这个功能，例如 pdf.js 或者 html2canvas。下面是简单的步骤：

1. 首先，在项目中安装需要的库：

   npm install @vueuse/core pdfjs-dist html2canvas --save

2. 引入依赖并创建一个可以预览 PDF 的组件，比如 `PdfPreview.vue`：

   <template>
     <div>
       <button @click="previewFile">预览PDF</button>
       <iframe v-if="previewIframe" :src="pdfUrl" style="display:none;"></iframe>
     </div>
   </template>

   <script>
   import { useAsync } from '@vueuse/core';
   import * as PDFJS from 'pdfjs-dist';

   export default {
     data() {
       return {
         previewIframe: false,
         pdfUrl: ''
       };
     },
     methods: {
       async previewFile(file) {
         if (!file.type.includes('application/pdf')) {
           alert('请选择PDF文件');
           return;
         }

         const url = URL.createObjectURL(file);
         this.pdfUrl = url;

         try {
           await PDFJS.getDocument(url).promise.then((doc) => {
             // 初始化预览组件，显示第一页
             this.previewIframe = true;
             this.$nextTick(() => {
               const firstPage = doc.getPage(1);
               firstPage.render({
                 canvasContext: document.getElementById('preview-canvas'),
                 viewport: firstPage.getViewport({ scale: 1 }),
               });
             });
           });
         } finally {
           URL.revokeObjectURL(url); // 关闭URL引用，释放资源
         }
       },
     },
   };
   </script>

3. 在模板中添加一个 canvas 元素用于渲染 PDF 内容：

   <template>
     ...
     <canvas id="preview-canvas"></canvas>
   </template>

这样，用户点击预览按钮后，会选择并预览他们上传的PDF文件。记得处理可能出现的错误，并在不需要预览时隐藏 iframe。