vue实现word在线预览
Vue 实现 Word 文档在线预览
使用 mammoth.js 解析 .docx 文件
mammoth.js 是一个浏览器端的库，可将 .docx 文件转换为 HTML，适合预览文档内容。
安装依赖：
npm install mammoth示例代码：
<template>
<div>
<input type="file" @change="handleFileUpload" accept=".docx" />
<div v-html="previewContent"></div>
</div>
</template>
<script>
import * as mammoth from "mammoth";
export default {
data() {
return {
previewContent: ""
};
},
methods: {
handleFileUpload(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
mammoth.extractRawText({ arrayBuffer: event.target.result })
.then(result => {
this.previewContent = 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="docxContainer"></div>
</div>
</template>
<script>
import { renderAsync } from "docx-preview";
export default {
methods: {
renderDocx(e) {
const file = e.target.files[0];
const container = this.$refs.docxContainer;
renderAsync(file, container)
.catch(err => console.error("渲染失败:", err));
}
}
};
</script>通过后端服务转换
若需支持旧版 .doc 文件或复杂格式，可通过后端转换（如 LibreOffice 或 API 服务）返回 HTML/PDF。
前端调用示例：
<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(e) {
const formData = new FormData();
formData.append("file", e.target.files[0]);
const response = await fetch("/api/convert", {
method: "POST",
body: formData
});
const { url } = await response.json();
this.previewUrl = url;
}
}
};
</script>使用微软 Office Online 嵌入
通过嵌入 Office Online 实现原生预览（需公网可访问的文件 URL）：
<template>
<iframe
width="100%"
height="600px"
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
frameborder="0">
</iframe>
</template>注意事项
- 直接解析
.docx的方案可能丢失部分复杂格式。 - 大文件建议分片上传或使用后端转换。
- 敏感文档需自行部署转换服务，避免第三方 API 泄漏数据。
