如何使用JavaScript导出含多内联样式的HTML为docx文件？

你当前用data:application/vnd.ms-word的方式本质是生成Word兼容的HTML文档，并非标准docx格式，复杂内联样式很容易丢失或解析失败。下面提供两种可靠的前端实现方案：

方案一：使用html-docx-js快速转换 #

这个工具可以直接将带样式的HTML转换为标准docx文件，自动处理内联样式映射：

1. 安装依赖（或通过CDN引入）：

npm install html-docx-js --save

2. 替换你的导出代码：

// 假设htmlString是你包含内联样式的HTML内容
const fullHtml = `<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    ${htmlString}
</body>
</html>`;

// 生成docx格式的Blob
const docxBlob = htmlDocx.asBlob(fullHtml);

// 创建下载链接并触发下载
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(docxBlob);
downloadLink.download = `${filename}.docx`;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadLink.href); // 释放资源

方案二：使用docx库手动构建（精细控制） #

如果需要完全定制文档结构和样式，可以用docx库手动解析HTML元素及内联样式，构建标准docx文档：

1. 安装依赖：

npm install docx --save

2. 示例代码（以处理段落、粗体、斜体、颜色为例）：

import { Document, Packer, Paragraph, TextRun } from 'docx';

// 解析HTML字符串
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(htmlString, 'text/html');
const docxParagraphs = [];

// 遍历HTML元素，转换为docx结构
htmlDoc.body.childNodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'P') {
        const textRuns = [];
        node.childNodes.forEach(textNode => {
            if (textNode.nodeType === Node.TEXT_NODE && textNode.textContent.trim()) {
                const styleProps = {};
                const parentEl = textNode.parentElement;
                
                // 映射内联样式或HTML标签到docx样式
                if (parentEl) {
                    if (parentEl.style.fontWeight === 'bold' || parentEl.tagName === 'B') {
                        styleProps.bold = true;
                    }
                    if (parentEl.style.fontStyle === 'italic' || parentEl.tagName === 'I') {
                        styleProps.italic = true;
                    }
                    if (parentEl.style.color) {
                        // 转换为docx支持的无#十六进制颜色
                        styleProps.color = parentEl.style.color.replace('#', '');
                    }
                    // 可扩展处理字体大小、下划线等其他样式
                }

                textRuns.push(new TextRun({
                    text: textNode.textContent,
                    ...styleProps
                }));
            }
        });
        docxParagraphs.push(new Paragraph(textRuns));
    }
});

// 创建docx文档并生成Blob
const docxDocument = new Document({
    sections: [{
        children: docxParagraphs,
    }],
});

Packer.toBlob(docxDocument).then(blob => {
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = `${filename}.docx`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(downloadLink.href);
});

总结 #

• 追求快速实现选方案一，能自动处理大部分内联样式；
• 需要定制化文档结构或特殊样式时选方案二，需手动扩展样式映射逻辑。

内容的提问来源于stack exchange，提问作者Suhail