vue 原始二进制流在线预览pdf

<think>我们正在使用Vue框架，并希望通过接收到的二进制流数据来在线预览PDF文件。根据引用[1]中的示例，我们可以使用PDF.js来实现这个功能。引用中展示了一个使用iframe来嵌入PDF.js的viewer.html，并通过URL参数传递PDF文件的URL（该URL是通过二进制流生成的Blob URL）。 步骤概述： 1. 从后端获取PDF的二进制流数据（arraybuffer）。 2. 将二进制流转换为Blob对象，类型为'application/pdf'。 3. 使用URL.createObjectURL生成一个临时的URL。 4. 将这个URL传递给PDF.js的viewer.html，通过iframe来展示。 注意：引用[1]中使用了VUE3和defHttp（可能是封装的axios）来获取数据。我们将按照类似的思路，但使用更通用的方式（比如使用axios）来演示。 具体实现： 第一步：安装PDF.js 我们可以通过npm安装pdfjs-dist，但是注意：PDF.js的viewer.html是官方提供的一个完整的PDF查看器界面，我们也可以直接使用静态文件。这里我们采用将viewer.html放到public静态目录中的方式（因为引用[1]中使用了/static/pdf/web/viewer.html）。 第二步：将PDF.js的web文件夹复制到public/static/pdf目录下（如果没有，可以从PDF.js的官方仓库下载：https://github.com/mozilla/pdf.js/ 下载后解压，将其中的web文件夹放到public/static/pdf目录下）。 第三步：编写Vue组件。 组件代码示例： 在模板中，我们使用iframe来加载viewer.html，并通过src属性传递PDF文件的Blob URL（注意需要进行encodeURIComponent编码）。 在方法中，我们请求后端获取二进制流，然后转换成Blob，生成URL，并赋值给pdfUrl，这样iframe的src就会更新并加载PDF。 注意：由于跨域问题，如果viewer.html和我们的项目不在同一个域，可能会遇到问题。因此我们将viewer.html放在自己的静态目录下。 代码实现如下：</think>在 Vue 框架中通过二进制流在线预览 PDF 文件，可以通过 PDF.js 库实现。以下是完整实现方案： ### 实现步骤 1. **安装依赖** ```bash npm install pdfjs-dist ``` 2. **创建 PDF 预览组件** (`PdfPreview.vue`) ```vue <template> <div class="pdf-container"> <canvas v-for="page in pages" :key="page" :ref="`canvas-${page}`"></canvas> </div> </template> <script> import * as pdfjsLib from 'pdfjs-dist/build/pdf'; import 'pdfjs-dist/build/pdf.worker.entry'; export default { props: { pdfData: { type: ArrayBuffer, required: true } }, data() { return { pages: [], pdfDoc: null }; }, watch: { pdfData: { immediate: true, handler(newVal) { if (newVal) this.loadPdf(newVal); } } }, methods: { async loadPdf(data) { try { // 初始化PDF文档 this.pdfDoc = await pdfjsLib.getDocument({ data }).promise; this.pages = Array.from({ length: this.pdfDoc.numPages }, (_, i) => i + 1); // 等待DOM更新后渲染 this.$nextTick(() => { this.renderPages(); }); } catch (error) { console.error('PDF加载失败:', error); } }, async renderPages() { for (const pageNum of this.pages) { const page = await this.pdfDoc.getPage(pageNum); const viewport = page.getViewport({ scale: 1.5 }); const canvas = this.$refs[`canvas-${pageNum}`][0]; const ctx = canvas.getContext('2d'); // 设置canvas尺寸 canvas.height = viewport.height; canvas.width = viewport.width; // 渲染PDF页面 await page.render({ canvasContext: ctx, viewport }).promise; } } } }; </script> <style scoped> .pdf-container { overflow: auto; border: 1px solid #eee; max-height: 80vh; } canvas { display: block; margin: 0 auto 20px; } </style> ``` 3. **在父组件中使用** ```vue <template> <div> <input type="file" @change="handleFileUpload" accept=".pdf"> <pdf-preview v-if="pdfData" :pdf-data="pdfData" /> </div> </template> <script> import PdfPreview from './PdfPreview.vue'; export default { components: { PdfPreview }, data() { return { pdfData: null }; }, methods: { handleFileUpload(event) { const file = event.target.files[0]; if (!file || file.type !== 'application/pdf') return; const reader = new FileReader(); reader.onload = (e) => { this.pdfData = e.target.result; }; reader.readAsArrayBuffer(file); } } }; </script> ``` ### 关键实现说明 1. **二进制流处理** - 使用 `FileReader` 读取文件为 `ArrayBuffer` - 通过 `pdfjsLib.getDocument({ data: arrayBuffer })` 加载 PDF 2. **PDF 渲染原理** ```mermaid graph LR A[二进制数据] --> B[PDFDocument] B --> C[获取页面] C --> D[创建Canvas] D --> E[渲染到Canvas] ``` 3. **性能优化** - 使用 `$nextTick` 确保 DOM 更新后再渲染 - 逐页渲染避免阻塞主线程 - 通过 `scale` 参数控制渲染分辨率 ### 备选方案：使用官方 Viewer ```vue <template> <iframe :src="viewerUrl" width="100%" height="600px" frameborder="0" ></iframe> </template> <script> export default { computed: { viewerUrl() { return `${window.location.origin}/pdfjs/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`; } }, props: { pdfUrl: String } }; </script> ``` > 需要将 [PDF.js 官方 Viewer](https://github.com/mozilla/pdf.js) 放入 `public/pdfjs` 目录 ### 注意事项 1. 跨域问题：确保二进制流来源与前端同源或配置 CORS 2. 大文件处理：建议分页加载，使用 `page.getViewport({ scale })` 控制分辨率 3. 移动端适配：添加触控事件支持（PDF.js 官方 Viewer 已支持） 4. 内存管理：销毁时调用 `PDFDocumentProxy.destroy()` ### 相关优化 - 添加加载进度条（监听 `onProgress` 事件） - 实现文本选择功能（启用 `textLayer` 选项） - 添加缩略图导航（使用 `getThumbnail` API） 此方案直接处理二进制流，无需转换为 Base64 或 Blob URL，减少内存占用并提升性能[^1]。