vue使用pdf.js实现在线预览pdf

### 3.1 使用 iframe 集成 PDF.js 实现在线预览 在 Vue 项目中集成 PDF.js 以实现 PDF 文件的在线预览，可以通过 iframe 嵌入 PDF.js 提供的 `viewer.html` 文件来实现。PDF.js 是由 Mozilla 开发的开源库，能够在浏览器中直接渲染 PDF 文件，无需依赖插件。 在 Vue 组件中，可以使用如下方式将 PDF 文件嵌入页面中进行预览： ```vue <template> <div class="pdf-container"> <iframe :src="pdfViewerUrl" width="100%" height="600px" frameborder="0" ></iframe> </div> </template> <script> export default { data() { return { pdfViewerUrl: './pdfjs/web/viewer.html?file=' + encodeURIComponent('http://example.com/sample.pdf') } } } </script> <style scoped> .pdf-container { width: 100%; height: 100vh; } </style> ``` 上述代码中，`pdfjs/web/viewer.html` 是 PDF.js 提供的默认 PDF 查看器页面，`file` 参数指定需要加载的 PDF 文件地址，可以是本地路径，也可以是远程服务器地址。使用 `encodeURIComponent` 对 URL 进行编码，确保特殊字符不会影响路径解析 [^4]。 ### 3.2 使用 a 标签或 window.open 打开 PDF 预览 除了使用 iframe 嵌入 PDF 查看器，还可以通过 a 标签或 JavaScript 的 `window.open` 方法打开 PDF 文件的预览页面。例如： ```vue <template> <div> <a :href="viewerUrl" target="_blank">点击预览 PDF</a> </div> </template> <script> export default { data() { return { viewerUrl: './pdfjs/web/viewer.html?file=' + encodeURIComponent('http://example.com/sample.pdf') } } } </script> ``` 这种方式适用于需要在新窗口中打开 PDF 查看器的场景，用户点击链接后会在新窗口中加载 PDF 文件 [^2]。 ### 3.3 支持远程 PDF 文件预览 PDF.js 支持通过远程 URL 预览 PDF 文件。只需将 `file` 参数设置为有效的远程地址即可，例如： ```javascript data() { return { viewerUrl: './pdfjs/web/viewer.html?file=' + encodeURIComponent('https://example.com/sample.pdf') } } ``` 即使 PDF 文件存储在远程服务器上，PDF.js 也能正确加载并渲染文件内容 [^3]。 ### 3.4 自定义 PDF 查看器路径 在 Vue 项目中集成 PDF.js 时，需要将 `pdfjs-dist` 或完整的 PDF.js 发行包引入项目，并确保 `viewer.html` 文件的路径正确。通常可以将 PDF.js 的 `web` 目录放置在项目的 `public` 文件夹中，以便通过相对路径访问 。 ### 3.5 Vue 3 中的 PDF 预览实现 在 Vue 3 项目中，同样可以使用上述方式嵌入 PDF.js 实现 PDF 预览功能。由于 Vue 3 支持 Composition API，可以将 PDF 查看器的加载逻辑封装在 `setup()` 或 `onMounted` 生命周期钩子中，确保组件正确加载 PDF 文件 [^1]。 ---