vue 使用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]。 ---

### 解决 Vue H5 中使用 vue-pdf 预览 PDF 展示不全的问题 在 Vue 项目中使用 `vue-pdf` 插件进行 PDF 预览时，可能会遇到展示不全或空白页面的问题。以下是可能的原因及解决方案： #### 1. **PDF 加载方式问题** 如果 PDF 数据是以 Base64 格式返回的，需要确保前端正确拼接数据格式。例如，在后端返回的 Base64 数据前添加 `data:application/pdf;base64,` 前缀[^3]。代码实现如下： ```javascript this.pdfContent = 'data:application/pdf;base64,' + basedata; ``` #### 2. **Vue 生命周期与组件销毁问题** 在 Vue 的生命周期中，如果组件未正确销毁，可能导致 PDF 加载失败或显示不全。可以通过监听组件的 `beforeDestroy` 或 `unmounted` 阶段释放资源。例如： ```javascript beforeDestroy() { if (this.pdfWorker) { this.pdfWorker.terminate(); // 终止 PDF 工作线程 } } ``` 确保在切换页面或重新加载时，清理之前的 PDF 实例[^1]。 #### 3. **Canvas 渲染问题** `vue-pdf` 插件的核心是通过 Canvas 渲染 PDF 页面。如果默认页码设置为 1，则可能只会显示第一页内容[^2]。可以动态设置页码以支持多页预览： ```javascript <pdf :src="pdfUrl" v-for="page in numPages" :key="page" :page="page" ></pdf> ``` 在加载完成后，计算总页数并动态渲染： ```javascript pdf.createLoadingTask(pdfUrl).then(pdf => { this.numPages = pdf.numPages; // 获取总页数 }); ``` #### 4. **环境配置问题** 确保项目中正确配置了 Webpack 或 Vite 的环境变量，以便支持静态资源加载和热更新功能[^4]。如果使用的是 Vue CLI，可以在 `vue.config.js` 中进行相关配置： ```javascript module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, }, }; ``` #### 5. **浏览器兼容性问题** 某些浏览器可能对 PDF 渲染存在兼容性问题，建议测试主流浏览器（如 Chrome、Safari）的表现。如果发现问题，可以通过调整 Canvas 的绘制参数解决。 --- ### 示例代码 以下是一个完整的 PDF 预览组件示例： ```vue <template> <div> <pdf v-for="page in numPages" :key="page" :src="pdfUrl" :page="page" ></pdf> </div> </template> <script> import pdf from "vue-pdf"; export default { components: { pdf }, data() { return { pdfUrl: "", numPages: 0, }; }, created() { this.loadPdf(); }, methods: { loadPdf() { const pdfUrl = "data:application/pdf;base64," + this.base64Data; // 替换为实际数据 this.pdfUrl = pdf.createLoadingTask(pdfUrl); this.pdfUrl.then(pdf => { this.numPages = pdf.numPages; }); }, }, }; </script> ``` --- ###