前端vue实现docpdf预览
Vue 实现 DOC/PDF 预览的方法
使用 PDF.js 预览 PDF
安装 pdf.js 库，通过 <canvas> 渲染 PDF 内容。需将 PDF 文件转换为二进制数据流或直接引用 URL。
// 安装依赖
npm install pdfjs-dist
// 组件示例
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
export default {
props: ['pdfUrl'],
mounted() {
this.loadPDF(this.pdfUrl);
},
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.0 });
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
}
}
};
</script>使用 iframe 嵌入 Office 在线预览
通过 Microsoft Office Online 或 Google Docs 的嵌入功能实现 DOC 预览。需将文件转换为公开可访问的 URL。
<iframe
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`"
width="100%"
height="500px"
frameborder="0">
</iframe>使用第三方库 vue-pdf-embed
对于快速集成，可使用封装好的 Vue 组件库如 vue-pdf-embed。
npm install vue-pdf-embed
<template>
<vue-pdf-embed :source="pdfSource" />
</template>
<script>
import VuePdfEmbed from 'vue-pdf-embed';
export default {
components: { VuePdfEmbed },
data() {
return { pdfSource: '/example.pdf' };
}
};
</script>使用 mammoth.js 解析 DOCX
对于 DOCX 文件，可通过 mammoth.js 转换为 HTML 后渲染。
npm install mammoth
<template>
<div v-html="docxContent"></div>
</template>
<script>
import * as mammoth from 'mammoth';
export default {
data() {
return { docxContent: '' };
},
async mounted() {
const response = await fetch('/document.docx');
const arrayBuffer = await response.arrayBuffer();
const result = await mammoth.extractRawText({ arrayBuffer });
this.docxContent = result.value;
}
};
</script>注意事项
- PDF.js 需处理跨域问题，本地开发时可能需要配置代理。
- Office 在线预览要求文件 URL 为公网可访问地址。
- DOCX 解析仅支持新版 Office 格式（.docx），旧版 .doc 需转换或使用其他工具。
- 大文件需考虑分页加载或懒加载优化性能。
