vue3 移动端预览pdf

### Vue3 移动端 PDF 预览插件或实现方式 在 Vue3 项目中实现移动端 PDF 预览功能，可以使用以下几种方法和插件： #### 方法一：使用 PDF.js PDF.js 是一个由 Mozilla 开发的功能强大的 JavaScript 库，支持在浏览器中渲染 PDF 文件。结合 Vue3 的响应式特性，可以轻松实现移动端的 PDF 预览功能。以下是实现步骤： 1. 安装 PDF.js： ```bash npm install pdfjs-dist ``` 2. 在 Vue 组件中引入并使用 PDF.js： ```javascript import { ref, onMounted } from 'vue'; import * as PDFJS from 'pdfjs-dist'; export default { setup() { const pdfContainer = ref(null); const pdfPages = ref([]); onMounted(async () => { const loadingTask = PDFJS.getDocument('/path/to/pdf/file.pdf'); const pdf = await loadingTask.promise; for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; pdfContainer.value.appendChild(canvas); await page.render({ canvasContext: context, viewport }).promise; pdfPages.value.push(canvas); } }); return { pdfContainer }; }, }; ``` 3. 模板部分： ```html <template> <div ref="pdfContainer" class="pdf-container"></div> </template> <style> .pdf-container { width: 100%; height: 100vh; overflow-y: auto; } </style> ``` 这种方法的优点是灵活且功能强大，但需要手动处理页面渲染逻辑[^1]。 --- #### 方法二：使用 vue-pdf `vue-pdf` 是基于 PDF.js 的 Vue 封装组件，能够简化 PDF 渲染过程。以下是实现步骤： 1. 安装 `vue-pdf`： ```bash npm install vue-pdf ``` 2. 在 Vue 组件中使用 `vue-pdf`： ```javascript import { ref } from 'vue'; import pdf from 'vue-pdf'; export default { components: { pdf }, setup() { const pdfSrc = ref('/path/to/pdf/file.pdf'); return { pdfSrc }; }, }; ``` 3. 模板部分： ```html <template> <pdf :src="pdfSrc" style="width: 100%; height: 100vh;"></pdf> </template> ``` 需要注意的是，`vue-pdf` 使用了 Canvas 渲染 PDF 页面，可能会导致某些高级功能（如文本选择、搜索）无法正常工作[^3]。 --- #### 方法三：使用 VuePdfEmbed `VuePdfEmbed` 是专门为 Vue3 设计的 PDF 渲染组件，支持移动端优化和多页渲染。以下是实现步骤： 1. 安装 `vue-pdf-embed`： ```bash npm install vue-pdf-embed ``` 2. 在 Vue 组件中使用 `VuePdfEmbed`： ```javascript import { ref } from 'vue'; import VuePdfEmbed from 'vue-pdf-embed'; export default { components: { VuePdfEmbed }, setup() { const pdfSource = ref('/path/to/pdf/file.pdf'); const numPages = ref(0); const loading = ref(true); const loadError = ref(false); const initPdf = async () => { try { const pdf = await VuePdfEmbed.useWorker().getDocument(pdfSource.value); numPages.value = pdf.numPages; loading.value = false; } catch (error) { loadError.value = true; } }; initPdf(); return { pdfSource, numPages, loading, loadError }; }, }; ``` 3. 模板部分： ```html <template> <div v-if="loading" class="loading">加载中...</div> <div v-else-if="loadError" class="error">PDF 加载失败</div> <div v-else class="pdf-preview"> <VuePdfEmbed v-for="page in numPages" :key="page" :source="pdfSource" :page="page" class="pdf-page" /> </div> </template> <style> .pdf-preview { display: flex; flex-direction: column; align-items: center; } .pdf-page { width: 100%; margin-bottom: 10px; } </style> ``` `VuePdfEmbed` 支持更高效的 PDF 渲染，并提供了更好的移动端适配能力[^5]。 --- ### 总结 - 如果需要完全自定义的渲染逻辑，可以选择直接使用 PDF.js。 - 如果希望快速实现 PDF 预览功能，可以选择 `vue-pdf` 或 `vue-pdf-embed`。 - 对于移动端优化需求较高的场景，推荐使用 `vue-pdf-embed`。 ---