Doc2HX

HTML和DOC文档转换器，支持HTML与Word文档的双向转换，具有丰富的格式保留功能。

特性

HTML转Word：保留标题、段落、列表、表格、图片等格式
Word转HTML：保留文档结构和基本样式
支持按章节重置列表编号
支持自定义样式和格式
支持图片转换和上传

注意

id 为 quoteList 的节点会被编译成参考文献
所有下载节点样式皆取标签的 computedStyle 值，h1标签默认居中，若想修改，改变其textAlign 属性
不会对 blockquote 标签、或class 为 overview 的节点进行编译（排除think、概述）

安装

npm install doc2hx

HTML转Word文档

import { exportToWord } from 'doc2hx'

/**
 * 将HTML内容转换为Word文档
 * @param {HTMLElement} element | element[] - 要导出的HTML根元素 支持传入多个根元素合并成文档处理
 * @param {Object} config - 配置选项（可选）
 */
exportToWord(
    [document.body],
    {
      fileName: 'export.docx', // 导出的文件名
      exclude: [], // 不需要导出的选择器（包括其子选择器）
      default: {
        font: 'Microsoft YaHei', // 字体默认微软雅黑
        size: 28, // 14磅 = 28 半磅
        lineSpacing: 1.5, // 行间距
        indent: 0, // 行缩进
        color: '#000000', // 添加默认颜色
        headingSizes: {
          h1: 32, // 16磅
          h2: 28, // 14磅
          h3: 24, // 12磅
          h4: 24,
          h5: 24,
          h6: 24
        }
      }
    }
)

章节列表编号

本库支持按章节重置列表编号，即不同章节（由标题h1-h6元素或具有ID的容器划分）中的有序列表会从1开始重新编号。这对于创建结构化文档非常有用。

示例HTML结构：

<div>
  <h1>第一章</h1>
  <ol>
    <li>第一章第一项</li>
    <li>第一章第二项</li>
  </ol>
  
  <h1>第二章</h1>
  <ol>
    <li>第二章第一项</li> <!-- 这里会从1开始，而不是继续前一个列表的编号 -->
    <li>第二章第二项</li>
  </ol>
</div>

Word文档转HTML

import { doc2Html } from 'doc2hx'

/**
 * 将Word文档转换为HTML
 * @param {File} file - 用户选择的docx文件
 * @param {Object} options - 转换选项（可选）
 * @returns {Promise<DocumentFragment>} - 包含转换后HTML内容的DocumentFragment
 */
const htmlFragment = await doc2Html(file, {
    // 图片转换配置
    convertImage: {
        // 自定义图片处理函数，用于上传图片并返回可访问的URL
        getSrc: async (imageFile) => {
            // 此处实现文件上传逻辑
            const formData = new FormData()
            formData.append('file', imageFile);
            const response = await fetch('/api/upload', {
                method: 'POST',
                body: formData
            });
            const result = await response.json()
            // 返回值必须是图片的可访问URL
            return `/api/images/${result.fileCode}`
        }
    },
    // 自定义样式映射（可选）
    // 详细编写方式参考：https://www.npmjs.com/package/mammoth#writing-style-maps
    styleMaps: [
        "p[style-name='Heading 1'] => h1:fresh",
        "p[style-name='Heading 2'] => h2:fresh"
    ]
})

// 将转换后的内容添加到页面
document.getElementById('preview').appendChild(htmlFragment);

浏览器兼容性

本库支持所有现代浏览器，包括：

Chrome 60+
Firefox 60+
Safari 12+
Edge 79+

许可证

MIT