【Vue】vue中将 html 或者 md 导出为 word 文档
一、背景与问题
在现代 Web 应用中，用户往往需要将页面中的内容（如 HTML 或 Markdown）导出为 Word 文档。这种需求常见于文档管理系统、在线编辑器、报表生成系统等场景。
然而，直接将 HTML 或 Markdown 导出为 Word 存在诸多挑战：
- 样式兼容性：Word 文档的样式规则与 HTML 不同，需特殊处理
- 内容完整性：需确保图片、表格、列表等复杂结构完整保留
- 安全性：需防止用户输入的 HTML 引入 XSS 攻击
- 性能瓶颈：处理大量内容时可能造成内存溢出
传统方案通常采用以下模式：
- 使用
html2canvas生成图片 - 用
jsPDF生成 PDF - 使用
docxtemplater生成 Word
本文将深入分析这些方案的实现原理，并给出完整解决方案。
二、基本原理
1. Word 文档结构
Word 文档本质是 ZIP 压缩包，包含以下关键文件：
document.xml：核心内容styles.xml：样式定义font：字体资源media：嵌入资源
生成 Word 文档的流程：
- 渲染 HTML 内容
- 转换为 Word 兼容的 XML 结构
- 添加样式定义
- 打包为 ZIP 文件
- 生成下载链接
2. 技术选型对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
docxtemplater | 支持复杂结构 | 需要模板 | 结构化文档 |
jsPDF + html2canvas | 支持复杂布局 | 生成质量差 | 简单表格 |
pandoc | 全格式支持 | 依赖后端 | 复杂文档 |
docx | 原生支持 | 需要 DOM 操作 | 简单内容 |
三、环境准备
npm install docxtemplater html-to-docx marked dompurify关键依赖说明：
docxtemplater：处理 Word 文档生成marked：Markdown 转 HTMLdompurify：安全处理用户输入html-to-docx：简化 HTML 转 Word
四、核心实现
1. 基础导出（HTML 转 Word）
import { saveAs } from 'file-saver'
import { docx } from 'docxtemplater'
import { htmlToText } from 'html-to-text'
export async function exportHtmlToWord(htmlContent) {
// 1. 清洗 HTML 防止 XSS
const sanitizedHtml = DOMPurify.sanitize(htmlContent)
// 2. 转换 HTML 为纯文本
const textContent = htmlToText(sanitizedHtml, {
selectors: ['p', 'h1', 'h2', 'ul', 'li']
})
// 3. 创建 Word 文档
const doc = new docx.Document({
sections: [{
properties: { pageWidth: 11908, pageHeight: 8504 },
children: [
new docx.Paragraph(textContent)
]
}]
})
// 4. 生成并下载
const blob = await docx.Packer.toBlob(doc)
saveAs(blob, 'document.docx')
}关键点解释：
- 使用
DOMPurify清洗 HTML 内容，防止 XSS 攻击 html-to-text转换 HTML 为纯文本，保留结构信息docxtemplater的Paragraph组件处理段落内容
2. Markdown 导出方案
import marked from 'marked'
import { exportHtmlToWord } from './htmlToWord'
export function exportMarkdownToWord(mdContent) {
// 1. 转换 Markdown 为 HTML
const htmlContent = marked.parse(mdContent)
// 2. 转换 HTML 为 Word
exportHtmlToWord(htmlContent)
}关键点解释：
- 使用
marked将 Markdown 转换为 HTML - 调用基础导出函数处理 HTML 内容
3. 复杂内容处理（含图片）
import { saveAs } from 'file-saver'
import { docx } from 'docxtemplater'
import { htmlToText } from 'html-to-text'
import { getBase64FromImage } from './utils'
export async function exportComplexContent(htmlContent) {
// 1. 清洗 HTML
const sanitizedHtml = DOMPurify.sanitize(htmlContent)
// 2. 转换 HTML 为纯文本
const textContent = htmlToText(sanitizedHtml, {
selectors: ['p', 'h1', 'h2', 'ul', 'li']
})
// 3. 提取图片
const imageUrls = extractImageUrls(sanitizedHtml)
const imageBlobs = await Promise.all(
imageUrls.map(url => fetch(url).then(res => res.blob()))
)
// 4. 生成 Word 文档
const doc = new docx.Document({
sections: [{
properties: { pageWidth: 11908, pageHeight: 8504 },
children: [
new docx.Paragraph(textContent)
]
}]
})
// 5. 添加图片
imageBlobs.forEach(blob => {
const image = new docx.Image(blob)
doc.addImage(image)
})
// 6. 生成并下载
const blob = await docx.Packer.toBlob(doc)
saveAs(blob, 'document.docx')
}关键点解释：
- 使用
fetch获取图片资源 - 使用
docx.Image添加图片到文档 - 需要处理图片的 Base64 编码
五、完整案例
1. Vue 组件实现
<template>
<div>
<textarea v-model="content" placeholder="输入 HTML 或 Markdown 内容"></textarea>
<button @click="exportDocument">导出为 Word</button>
</div>
</template>
<script>
import { saveAs } from 'file-saver'
import { docx } from 'docxtemplater'
import { htmlToText } from 'html-to-text'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
export default {
data() {
return {
content: ''
}
},
methods: {
async exportDocument() {
const sanitizedContent = DOMPurify.sanitize(this.content)
const isMarkdown = this.content.startsWith('#')
if (isMarkdown) {
const htmlContent = marked.parse(sanitizedContent)
await this.exportHtmlToWord(htmlContent)
} else {
await this.exportHtmlToWord(sanitizedContent)
}
},
async exportHtmlToWord(htmlContent) {
const textContent = htmlToText(htmlContent, {
selectors: ['p', 'h1', 'h2', 'ul', 'li']
})
const doc = new docx.Document({
sections: [{
properties: { pageWidth: 11908, pageHeight: 8504 },
children: [
new docx.Paragraph(textContent)
]
}]
})
const blob = await docx.Packer.toBlob(doc)
saveAs(blob, 'document.docx')
}
}
}
</script>2. 进阶功能扩展
// 添加图片支持
function extractImageUrls(html) {
const parser = new DOMParser()
const doc = parser.parseFromString(html, 'text/html')
return Array.from(doc.querySelectorAll('img'))
.map(img => img.src)
}六、源码解析
1. docxtemplater 核心流程
const doc = new docx.Document({
sections: [{
properties: { pageWidth: 11908, pageHeight: 8504 },
children: [
new docx.Paragraph(textContent)
]
}]
})pageWidth和pageHeight定义页面尺寸（单位为 twips）Paragraph组件处理段落内容- 通过
docx.Packer.toBlob生成最终文件
2. html-to-text 转换逻辑
htmlToText(htmlContent, {
selectors: ['p', 'h1', 'h2', 'ul', 'li']
})- 使用
p标签处理段落 - 通过
h1,h2处理标题 - 使用
ul和li保留列表结构 - 保留换行符和空格信息
七、进阶使用
1. 复杂表格支持
import { Table } from 'docx'
const table = new Table({
columns: [
{ text: '标题1', columnSpan: 2 },
{ text: '标题2' }
],
rows: [
[ '行1列1', '行1列2' ],
[ '行2列1', '行2列2' ]
]
})
doc.addTable(table)2. 样式控制
const paragraph = new docx.Paragraph({
text: '这是加粗文本',
paragraphProperties: {
style: 'Heading1',
spacing: {
before: 240,
after: 240
}
}
})3. 图片优化
const image = new docx.Image(blob, {
width: 600,
height: 400
})八、性能与工程实践
1. 性能优化策略
| 优化点 | 方法 | 效果 |
|---|---|---|
| 大文件处理 | 分页导出 | 避免内存溢出 |
| 图片压缩 | WebP 格式 | 减少文件体积 |
| 避免重复处理 | 缓存机制 | 提高重复请求速度 |
| 异步处理 | Web Workers | 避免阻塞主线程 |
2. 安全注意事项
- 使用
DOMPurify清洗用户输入 - 避免直接使用
eval或new Function - 对图片 URL 进行校验
- 设置 CORS 策略
3. 异常处理
try {
await exportHtmlToWord(htmlContent)
} catch (error) {
console.error('导出失败:', error)
this.$notify.error({ message: '导出失败' })
}九、常见问题与踩坑
1. 样式丢失问题
错误示例：
const paragraph = new docx.Paragraph(htmlContent)原因：Word 不支持 HTML 样式
解决方案：
const text = htmlToText(htmlContent, {
selectors: ['p', 'h1', 'h2', 'ul', 'li']
})
const paragraph = new docx.Paragraph(text)2. 图片路径问题
错误示例：
const image = new docx.Image('https://example.com/image.png')原因：外部资源可能不可用
解决方案：
const image = new docx.Image(blob, {
width: 600,
height: 400
})3. 大文件内存溢出
错误示例：
const doc = new docx.Document({
sections: [{ children: [ ...10000个段落 ... ] }]
})解决方案：
- 分批处理
- 使用流式处理
- 增加内存限制
十、最佳实践
1. 推荐方案选择
| 场景 | 推荐方案 | 说明 |
|---|---|---|
| 简单内容 | docxtemplater | 轻量级，易于使用 |
| 复杂结构 | pandoc | 全格式支持 |
| 网页内容 | jsPDF + html2canvas | 保留布局 |
| 文档模板 | docxtemplater + 模板 | 结构化数据 |
2. 工程实践建议
- 使用 TypeScript 增强类型安全
- 将导出逻辑封装为服务组件
- 添加进度指示和错误重试机制
- 使用 Web Workers 处理大文件
十一、总结
在 Vue 项目中将 HTML 或 Markdown 导出为 Word 文档是一项具有挑战性的任务，需要综合考虑样式处理、内容完整性、安全性等多个因素。通过使用 docxtemplater 和 html-to-text 等工具，我们可以构建出稳定可靠的导出方案。
实际应用中，我们建议：
- 使用
docxtemplater处理结构化数据 - 使用
marked转换 Markdown - 使用
DOMPurify安全处理用户输入 - 对大文件进行分页处理
- 添加详细的错误日志和用户提示
对于需要高精度格式控制的场景，建议采用 pandoc 等更专业的文档处理工具。在开发过程中，始终需要平衡性能、安全性和用户体验，通过合理的架构设计和代码组织，可以实现一个稳定、高效的导出系统。