# Vue 项目 PDF 预览插件指南本文整合了 Vue 项目中常用的 PDF 预览插件，涵盖 Vue 2 和 Vue 3 的解决方案，并提供使用示例和选型建议。 --- ## 主流插件及使用示例 ### 1. **vue-pdf** #### 简介 - 基于 `pdf.js` 封装的 Vue 2 插件，支持分页渲染和基础交互。 - **兼容性**：仅支持 Vue 2。 #### 安装 ```bash npm install vue-pdf ``` #### 使用示例 ```html ``` #### 特点 - 支持动态加载 PDF 文件流。 - 多页 PDF 需循环渲染组件。 --- ### 2. **vue-pdf-embed** #### 简介 - 专为 Vue 3 优化的 PDF 预览组件，支持翻页、缩放、下载等功能。 - **兼容性**：Vue 3 专用，支持 SSR。 #### 安装 ```bash npm install vue-pdf-embed ``` #### 使用示例 ```html ``` #### 特点 - 现代化 UI，支持文本层和工具栏定制。 - 移动端适配友好，清晰度优化方案可参考[官方文档](https://github.com/hrynko/vue-pdf-embed)。 --- ### 3. **pdfvuer** #### 简介 - 适用于 Vue 2 的轻量级 PDF 查看器，支持缩略图和逐页加载。 - **兼容性**：Vue 2。 #### 安装 ```bash npm install pdfvuer ``` #### 使用示例 ```html ``` #### 特点 - 依赖 `pdf.js`，需注意版本匹配。 - 适合大文件分页加载场景。 --- ### 4. **vue-office** #### 简介 - 一站式文件预览库，支持 PDF、Word、Excel 等多种格式。 - **兼容性**：Vue 2 和 Vue 3。 #### 安装 ```bash npm install vue-office ``` #### 使用示例 ```html ``` #### 特点 - 多格式文件预览首选，适合复杂业务需求。 --- ### 5. **直接集成 PDF.js** #### 简介 - 无需 Vue 插件，直接使用 `pdfjs-dist` 实现高度定制化渲染。 #### 安装 ```bash npm install pdfjs-dist ``` #### 使用示例 ```html ``` #### 特点 - 灵活性最高，适合需要深度定制的项目。 --- ### 6. **pdfobject** #### 简介 - 轻量级库，自动检测浏览器支持并嵌入 PDF。 #### 安装 ```bash npm install pdfobject ``` #### 使用示例 ```html ``` #### 特点 - 提供回退下载链接，兼容性较好。 --- ## 选型建议 | 场景 | 推荐方案 | |---------------------|-----------------------------| | **Vue 2 项目** | `vue-pdf` 或 `pdfvuer` | | **Vue 3 项目** | `vue-pdf-embed` 或 `vue-office` | | **多格式支持** | `vue-office` | | **高度定制化** | 直接集成 `PDF.js` | | **快速基础预览** | `pdfobject` 或 `iframe` | --- ## 注意事项 1. **跨域问题**：外部 PDF 文件需配置 CORS 策略。 2. **性能优化**：大文件建议分页加载（如 `pdfvuer` 的逐页渲染）。 3. **移动端适配**：调整 `canvas` 分辨率以优化清晰度。 4. **版本兼容性**：部分插件依赖特定版本的 `pdf.js`，需检查文档。 ---