vue3pdf预览

### 在 Vue 3 中实现 PDF 预览的方法或库 在 Vue 3 中实现 PDF 预览功能，可以通过使用特定的库来简化开发流程。以下是几种常见的方法和库： #### 方法一：使用 `vue-pdf-embed` `vue-pdf-embed` 是一个专门为 Vue 3 设计的库，用于加载和渲染 PDF 文件。它支持现代浏览器，并且可以轻松集成到 Vue 项目中[^2]。 - **安装**： ```bash npm install vue-pdf-embed ``` - **代码示例**： ```vue <template> <div> <VuePdfEmbed :src="pdfUrl" /> </div> </template> <script> import VuePdfEmbed from 'vue-pdf-embed'; export default { components: { VuePdfEmbed }, data() { return { pdfUrl: '/path/to/your/pdf.pdf', // 替换为实际的PDF路径 }; }, }; </script> ``` #### 方法二：使用 `pdfjs-dist` `pdfjs-dist` 是 Mozilla 开发的 PDF.js 的官方版本，可以直接用于解析和渲染 PDF 文件。结合 Vue 3 使用时，需要手动处理文件加载和页面渲染[^1]。 - **安装**： ```bash npm install pdfjs-dist ``` - **代码示例**： ```vue <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import { createLoadingTask } from 'pdfjs-dist'; export default { data() { return { pdfUrl: '/path/to/your/pdf.pdf', // 替换为实际的PDF路径 }; }, mounted() { const loadingTask = createLoadingTask(this.pdfUrl); loadingTask.promise.then((pdf) => { pdf.getPage(1).then((page) => { const canvas = this.$refs.pdfCanvas; const context = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1.5 }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport, }; page.render(renderContext); }); }); }, }; </script> ``` #### 方法三：使用 `iframe` 如果对功能需求较为简单，可以直接通过 `<iframe>` 标签嵌入 PDF 文件进行预览[^3]。 - **代码示例**： ```vue <template> <div> <iframe :src="pdfUrl" width="100%" height="600px"></iframe> </div> </template> <script> export default { data() { return { pdfUrl: '/path/to/your/pdf.pdf', // 替换为实际的PDF路径 }; }, }; </script> ``` #### 方法四：自定义组件封装 为了提高复用性和可维护性，可以将 PDF 预览功能封装为独立的 Vue 组件。例如，在父组件中传递 PDF 文件路径给子组件[^4]。 - **父组件**： ```vue <template> <div> <PDFView :pdfUrl="demoPdf" /> </div> </template> <script setup> import PDFView from './components/pdfPreview.vue'; import demoPdf from './Js.pdf'; </script> ``` - **子组件（pdfPreview.vue）**： ```vue <template> <div> <VuePdfEmbed :src="pdfUrl" /> </div> </template> <script> import VuePdfEmbed from 'vue-pdf-embed'; export default { components: { VuePdfEmbed }, props: { pdfUrl: { type: String, required: true, }, }, }; </script> ``` ### 注意事项 - 如果需要限制用户下载 PDF 文件，可以通过后端设置 HTTP 响应头或使用无下载按钮的插件实现[^3]。 - 确保 PDF 文件路径正确，建议将静态资源存放在公共目录下或通过后端接口动态返回文件流。