vue3实现预览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]。

### 实现 Vue3 中 PDF 文件的在线预览 为了在 Vue3 项目中实现 PDF 文件的在线预览功能，可以采用 `vue-pdf` 这一组件库。该库提供了简单易用的方法来加载并渲染 PDF 文档[^1]。 #### 安装依赖包 首先，在项目根目录下通过 npm 或 yarn 来安装所需的依赖： ```bash npm install vue-pdf ``` 或者如果更倾向于使用 yarn: ```bash yarn add vue-pdf ``` #### 导入与注册组件 接着，在需要展示 PDF 的页面或组件内导入此插件，并将其作为局部/全局组件进行注册。对于单文件组件来说，可以在 `<script setup>` 部分完成这些操作[^2]: ```javascript // MyPdfViewer.vue <script setup> import { ref } from 'vue'; import pdf from 'pdfvuer'; const props = defineProps({ src: String, }); </script> <template> <div style="width: 80%; margin-left:auto; margin-right:auto;"> <pdf :src="props.src"></pdf> </div> </template> <style scoped> /* 自定义样式 */ </style> ``` 这里假设已经有一个名为 `MyPdfViewer` 的自定义组件用来显示 PDF 内容。注意要给定合适的宽高比例以便更好地适应不同屏幕尺寸下的查看体验。 #### 使用示例 最后就是实际应用这个新创建好的组件了。只需要传入目标 PDF 文件链接即可轻松实现在线浏览效果: ```html <MyPdfViewer src="/path/to/sample.pdf"/> ``` 上述代码片段展示了如何快速集成一个基本的功能模块到现有应用程序当中去。当然还可以进一步调整参数选项来自定义外观行为等方面的内容。