vue实现word文档预览
Vue 实现 Word 文档预览
使用 mammoth.js 转换 Word 为 HTML
mammoth.js 是一个将 .docx 文件转换为 HTML 的库，适合在 Vue 中实现轻量级预览。
安装依赖：
npm install mammoth.js示例代码：
<template>
<div>
<input type="file" @change="handleFileUpload" accept=".docx" />
<div v-html="htmlContent"></div>
</div>
</template>
<script>
import mammoth from "mammoth";
export default {
data() {
return {
htmlContent: "",
};
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
mammoth
.extractRawText({ arrayBuffer: e.target.result })
.then((result) => {
this.htmlContent = result.value;
});
};
reader.readAsArrayBuffer(file);
},
},
};
</script>使用 docx-preview 库
docx-preview 提供更专业的 Word 文档渲染效果，支持样式保留。
安装依赖：
npm install docx-preview示例代码：
<template>
<div>
<input type="file" @change="renderDocx" accept=".docx" />
<div ref="documentContainer"></div>
</div>
</template>
<script>
import { renderAsync } from "docx-preview";
export default {
methods: {
renderDocx(event) {
const file = event.target.files[0];
const container = this.$refs.documentContainer;
renderAsync(file, container).catch((err) => {
console.error("渲染失败:", err);
});
},
},
};
</script>通过后端服务转换
若需支持复杂格式或旧版 .doc 文件，可通过后端（如 LibreOffice 或 Python 库）转换为 PDF/HTML 后返回前端显示。
前端示例（假设接口返回 HTML）：
<template>
<div>
<input type="file" @change="uploadFile" />
<iframe v-if="previewUrl" :src="previewUrl" width="100%" height="500px"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
previewUrl: "",
};
},
methods: {
async uploadFile(event) {
const formData = new FormData();
formData.append("file", event.target.files[0]);
const response = await fetch("/api/convert-to-html", {
method: "POST",
body: formData,
});
this.previewUrl = await response.text();
},
},
};
</script>注意事项
- 样式兼容性：转换后的 HTML 可能需要额外 CSS 调整。
- 文件大小限制：大文件需分块处理或使用进度提示。
- 安全防护：直接渲染 HTML 时需防范 XSS 攻击，可配合
DOMPurify过滤内容。
根据需求选择方案：纯前端方案适合简单预览，复杂场景建议结合后端处理。
