如何在Vue3中实现跳转PDF链接预览而不是下载

在Vue3中实现跳转PDF链接预览而不是下载，可以通过以下几种方法实现： ### 方法一：使用HTML的`<iframe>`标签 ```html <template> <div> <a @click="previewPDF">预览PDF</a> </div> </template> <script> export default { methods: { previewPDF() { window.open('path/to/your.pdf', '_blank'); } } } </script> ``` ### 方法二：使用`<embed>`标签 ```html <template> <div> <a @click="previewPDF">预览PDF</a> </div> </template> <script> export default { methods: { previewPDF() { window.open('path/to/your.pdf', '_blank'); } } } </script> ``` ### 方法三：使用Vue组件库（如vue-pdf） 首先，安装`vue-pdf`库： ```bash npm install vue-pdf ``` 然后，在组件中使用： ```html <template> <div> <a @click="previewPDF">预览PDF</a> <pdf v-if="showPreview" :src="pdfUrl"></pdf> </div> </template> <script> import { ref } from 'vue'; import pdf from 'vue-pdf'; export default { components: { pdf }, setup() { const showPreview = ref(false); const pdfUrl = ref('path/to/your.pdf'); const previewPDF = () => { showPreview.value = true; }; return { showPreview, pdfUrl, previewPDF }; } } </script> ``` ### 方法四：使用PDF.js 首先，安装`pdfjs-dist`库： ```bash npm install pdfjs-dist ``` 然后，在组件中使用： ```html <template> <div> <a @click="previewPDF">预览PDF</a> <canvas id="pdf-canvas"></canvas> </div> </template> <script> import { ref, onMounted } from 'vue'; import { getDocument } from 'pdfjs-dist'; export default { setup() { const previewPDF = async () => { const loadingTask = getDocument('path/to/your.pdf'); const pdf = await loadingTask.promise; const page = await pdf.getPage(1); const scale = 1.5; const viewport = page.getViewport({ scale }); const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; await page.render({ canvasContext: context, viewport: viewport }).promise; }; return { previewPDF }; } } </script> ``` 以上几种方法都可以实现PDF预览而不是下载，具体选择哪种方法可以根据项目需求和个人偏好来决定。