vue-pdf 在线预览pdf

### 在 Vue 中使用 `vue-pdf-embed` 实现在线预览 PDF 文件 在 Vue 项目中实现 PDF 文件的在线预览功能，可以借助 `vue-pdf-embed` 这一轻量级组件。它基于 PDF.js 构建，能够在前端直接加载并渲染 PDF 文件，适用于需要在 Web 页面中嵌入 PDF 预览的场景[^1]。 #### 安装依赖 首先，确保项目中已安装 `vue-pdf-embed`。可以通过 npm 或 yarn 安装该依赖： ```bash npm install vue-pdf-embed ``` 或 ```bash yarn add vue-pdf-embed ``` #### 基本使用方式 在 Vue 组件中引入 `vue-pdf-embed` 并注册，随后可在模板中使用 `<pdf-embed>` 标签进行 PDF 文件的加载和渲染。支持传入 PDF 的 URL 或本地路径作为 `source` 属性值。 ```vue <template> <div> <pdf-embed :source="pdfUrl" /> </div> </template> <script> import { PdfEmbed } from 'vue-pdf-embed' export default { components: { pdfEmbed: PdfEmbed }, data() { return { pdfUrl: '/sample.pdf' // 确保路径有效 } } } </script> ``` #### 控制渲染时机 由于 `vue-pdf-embed` 依赖 DOM 渲染，若将其放置在 `el-dialog` 等延迟加载的容器中，需确保组件在对话框打开时才进行初始化。可通过 `v-if` 控制组件的渲染时机，避免因 DOM 未生成导致 PDF 无法显示。 ```vue <template> <el-dialog v-model="isPreviewDialog" title="PDF Preview"> <div v-if="isPreviewDialog"> <pdf-embed :source="pdfUrl" /> </div> </el-dialog> </template> ``` #### 处理 PDF 加载错误与进度 为了提升用户体验，可以在组件中监听 `@error` 和 `@progress` 事件，以捕获加载失败的具体原因并显示加载进度。 ```vue <template> <div v-if="isPreviewDialog"> <div v-if="loading">加载中... {{ progress }}%</div> <pdf-embed :source="pdfUrl" @error="onError" @progress="onProgress" /> </div> </template> <script> export default { data() { return { loading: true, progress: 0 } }, methods: { onError(error) { console.error('PDF 加载失败:', error) this.loading = false }, onProgress(progress) { this.progress = Math.round(progress * 100) } } } </script> ``` #### 支持跨域 PDF 文件 若 PDF 文件来源于其他域名，需确保服务器配置了正确的 CORS 策略。可以在响应头中添加 `Access-Control-Allow-Origin: *`，以便浏览器能够正常加载 PDF 文件[^1]。 #### 实现分页与缩放功能 `vue-pdf-embed` 提供了基础的 PDF 渲染能力，如需实现分页、缩放等高级功能，可结合 `pdfjs-dist` 进行扩展。例如，通过 `getDocument` 方法获取 PDF 文档信息并实现翻页逻辑。 ```javascript import { pdfjs } from 'vue-pdf-embed' import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry' pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker ``` 通过上述方式，可以在 Vue 项目中高效地实现 PDF 文件的在线预览功能，并结合 Element UI 等 UI 框架实现良好的交互体验[^3]。 ---

以下是在uni-app中使用vue-pdf预览pdf并指定vue-pdf插件版本的方法： 1. 安装vue-pdf插件 ```shell npm install [email protected] --save ``` 2. 在需要使用pdf预览的页面中引入vue-pdf组件 ```vue <template> <div> <pdf :src="pdfUrl" :page="1" :total-pages="totalPages"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { pdfUrl: 'http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf', totalPages: 0 } }, mounted() { this.$nextTick(() => { this.totalPages = this.$refs.pdf.numPages }) } } </script> ``` 3. 在mounted钩子函数中获取pdf总页数 ```vue mounted() { this.$nextTick(() => { this.totalPages = this.$refs.pdf.numPages }) } ``` 4. 在页面中使用vue-pdf组件 ```vue <pdf :src="pdfUrl" :page="1" :total-pages="totalPages"></pdf> ```