【Vue】vue中将 html 或者 md 导出为 word 文档

'# 【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 转 HTML
dompurify：安全处理用户输入
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 等更专业的文档处理工具。在开发过程中，始终需要平衡性能、安全性和用户体验，通过合理的架构设计和代码组织，可以实现一个稳定、高效的导出系统。

【Vue】vue中将 html 或者 md 导出为 word 文档

一、背景与问题

二、基本原理

1. Word 文档结构

2. 技术选型对比

三、环境准备

四、核心实现

1. 基础导出（HTML 转 Word）

2. Markdown 导出方案

3. 复杂内容处理（含图片）

五、完整案例

1. Vue 组件实现

2. 进阶功能扩展

六、源码解析

1. `docxtemplater` 核心流程

2. `html-to-text` 转换逻辑

七、进阶使用

1. 复杂表格支持

2. 样式控制

3. 图片优化

八、性能与工程实践

1. 性能优化策略

2. 安全注意事项

3. 异常处理

九、常见问题与踩坑

1. 样式丢失问题

2. 图片路径问题

3. 大文件内存溢出

十、最佳实践

1. 推荐方案选择

2. 工程实践建议

十一、总结

评论已关闭

推荐阅读

一、背景与问题

二、基本原理

1. Word 文档结构

2. 技术选型对比

三、环境准备

四、核心实现

1. 基础导出（HTML 转 Word）

2. Markdown 导出方案

3. 复杂内容处理（含图片）

五、完整案例

1. Vue 组件实现

2. 进阶功能扩展

六、源码解析

1. docxtemplater 核心流程

2. html-to-text 转换逻辑

七、进阶使用

1. 复杂表格支持

2. 样式控制

3. 图片优化

八、性能与工程实践

1. 性能优化策略

2. 安全注意事项

3. 异常处理

九、常见问题与踩坑

1. 样式丢失问题

2. 图片路径问题

3. 大文件内存溢出

十、最佳实践

1. 推荐方案选择

2. 工程实践建议

十一、总结

评论已关闭

推荐阅读

1. `docxtemplater` 核心流程

2. `html-to-text` 转换逻辑