vue在线预览pdf文件组件

### 实现Vue.js PDF在线预览组件库 为了实现在Vue.js应用程序中嵌入PDF文件的在线预览功能，可以选择使用`pdfjs-dist`库配合自定义Vue组件的方式。此方法允许开发者轻松集成高质量的PDF渲染能力。 #### 使用 `pdfjs-dist` `pdfjs-dist` 是由Mozilla维护的一个开源JavaScript库，用于解析和呈现PDF文档。通过npm安装该包之后，在Vue项目里创建一个新的组件专门用来处理PDF显示逻辑： ```bash npm install pdfjs-dist --save ``` 接着编写名为PdfViewer.vue的新组件如下所示: ```vue <template> <div class="pdf-viewer"> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import * as pdfjsLib from "pdfjs-dist"; pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${require('pdfjs-dist').version}/pdf.worker.min.js`; export default { props: ["src"], mounted() { let loadingTask = pdfjsLib.getDocument(this.src); loadingTask.promise.then((pdf) => { console.log("Total pages:", pdf.numPages); // Render first page only for simplicity. pdf.getPage(1).then(function (page) { var scale = 1.5; var viewport = page.getViewport({ scale }); // Prepare canvas using PDF page dimensions var canvas = this.$refs.pdfCanvas; var context = canvas.getContext("2d"); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }.bind(this)); }); } }; </script> <style scoped> .pdf-viewer { width: 100%; } canvas { border: 1px solid black; } </style> ``` 上述代码片段展示了如何利用`pdfjs-dist`加载远程PDF资源并将其绘制在一个HTML `<canvas>`元素上[^1]。注意这里只简单实现了单页展示；实际应用可能还需要考虑分页、缩放等功能扩展。 最后，在主页面或者其他父级组件内引入这个新的子组件，并传递目标PDF文件URL作为属性参数即可完成基本配置。