vue实现在线预览pdf

### 实现 Vue 中的 PDF 文件在线预览 为了实现在 Vue 应用程序中在线预览 PDF 文件的功能，可以采用 `pdf.js` 这一强大的 JavaScript 库来解析并渲染 PDF 文档。以下是具体实现方式： #### 方法一：基于 pdf.js 的自定义组件开发 通过创建一个专门用于显示 PDF 文件的 Vue 组件，可以在项目中轻松集成此功能。 ```javascript import { ref, onMounted } from 'vue'; import * as pdfjsLib from 'pdfjs-dist'; // 设置 worker 路径 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url, ).href; export default { props: ['src'], setup(props) { const canvasContainer = ref(null); function renderPage(pageNum) { let loadingTask = pdfjsLib.getDocument(props.src); loadingTask.promise.then((pdf) => { pdf.getPage(pageNum).then((page) => { let viewport = page.getViewport({ scale: 1.5 }); // 准备画布容器 let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // 将画布置于 DOM 结构内 canvasContainer.value.appendChild(canvas); // 渲染页面至指定上下文中 var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }, (reason) => { console.error(reason); }); } onMounted(() => { renderPage(1); // 默认加载第一页 }); return { canvasContainer } }, template: ` <div> <h3>PDF Preview</h3> <div style="border:1px solid black;" ref="canvasContainer"></div> </div>` } ``` 上述代码展示了如何构建一个简单的 Vue 组件以展示单页 PDF 内容[^1]。 #### 方法二：使用 iframe 或 embed 标签嵌入 PDF 预览 对于不需要高度定制化需求的情况，可以直接利用 HTML 提供的 `<iframe>` 或者 `<embed>` 标签快速完成 PDF 文件的在线浏览工作。 ```html <template> <div class="preview-container"> <!-- 使用 iframe 方式 --> <iframe :src="pdfUrl" width="80%" height="600px"></iframe> <!-- 或者使用 embed 方式 --> <!--<embed type="application/pdf" :src="pdfUrl" width="80%" height="600px">--> </div> </template> <script> export default { data() { return { pdfUrl: '/path/to/your/file.pdf' } } }; </script> ``` 这种方法简单易行，适合那些只需要基本阅读体验的应用场景[^3]。 #### 方法三：封装成可重用的 Vue 插件或组件库 如果希望在整个应用甚至多个项目之间共享相同的 PDF 查看逻辑，则考虑将其打包为独立插件或是通用型 UI 组件的一部分。这不仅有助于减少重复劳动还能提高维护效率。 ```javascript // src/plugins/PdfViewerPlugin.js import PdfViewerComponent from './components/PdfViewer.vue' const install = function(Vue){ Vue.component('PdfViewer', PdfViewerComponent) } if(typeof window !=='undefined' && window.Vue){ window.Vue.use(install) } export default install ``` 之后只需在 main.js 中引入该插件即可全局注册对应的 PDF 查看器组件[^2]。

要实现在线预览和下载 PDF 文件，可以使用以下两种方式： 1. 使用第三方库 可以使用一些第三方库来实现在线预览和下载 PDF 文件，比如 pdf.js。这个库可以在浏览器中渲染 PDF 文件，同时支持下载功能。具体使用方法可以参考该库的官方文档。 2. 使用浏览器自带的 PDF 预览功能 大多数现代浏览器都内置了 PDF 预览功能，可以直接在浏览器中打开 PDF 文件进行在线预览，也可以右键选择“另存为”进行下载。在 Vue 中，可以通过在模板中使用 iframe 标签来实现 PDF 在线预览，代码如下： ```html <template> <div> <iframe :src="pdfUrl" frameborder="0"></iframe> <button @click="downloadPdf">下载 PDF</button> </div> </template> <script> export default { data() { return { pdfUrl: "http://example.com/example.pdf", // PDF 文件的 URL }; }, methods: { downloadPdf() { window.open(this.pdfUrl); }, }, }; </script> <style> iframe { width: 100%; height: 100vh; } </style> ``` 需要注意的是，如果 PDF 文件存储在本地的话，需要使用 require 或 import 引入，然后将文件路径作为 iframe 的 src 属性值。