如何实现HTML Blob转DOCX Blob并保持与直接粘贴一致的样式？

问题背景 #

需要将屏幕显示内容导出为DOCX文件，尝试过先复制到剪贴板再用html-to-docx/html-docx-js转换，但输出样式和直接粘贴到Word的效果不一致，希望通过代码实现完全匹配的样式。

现有复制到剪贴板的代码：

const handleCopyToClipboard = () => {
    const contentElement = contentRef.current;
    if (contentElement) {
        const range = document.createRange();
        range.selectNode(contentElement);
        const htmlContent = contentElement.innerHTML.replace(/\n/g, '<br>');
        const tempElement = document.createElement('div');
        tempElement.innerHTML = htmlContent;
        const tables = tempElement.querySelectorAll('table');
        tables.forEach(table => {
            const rows = Array.from(table.querySelectorAll('tr'));
            const tsvData = rows.map(row => {
                const cells = Array.from(row.querySelectorAll('th, td'));
                return cells.map(cell => cell.textContent).join('\t');
            }).join('\n');
            table.setAttribute('data-tsv', tsvData);
        });
        document.body.appendChild(tempElement);
        window.getSelection()?.removeAllRanges();
        const tempRange = document.createRange();
        tempRange.selectNode(tempElement);
        window.getSelection()?.addRange(tempRange);
        document.execCommand('copy');
        window.getSelection()?.removeAllRanges();
        tempElement.remove();
        tables.forEach(table => table.removeAttribute('data-tsv'));
        message.success('Copied to clipboard!', 4);
    }
};

读取剪贴板并转换DOCX的代码：

const getDocs = async ()=>{
    let htmlData = ''
    const clipboardContents = await navigator.clipboard.read()
    for (const item of clipboardContents) {
        for (const type of item.types) {
            if (type.includes("html")){
                const htmlBlob = await item.getType(type)
                htmlData = await htmlBlob.text()
            }
        }
    }

    const fileBuffer = await HTMLtoDOCX(htmlData)
    saveAs(fileBuffer, 'html-to-docx.docx');
}
getDocs()

解决方案 #

核心原因

浏览器复制到剪贴板时，会生成**Word专属的兼容HTML（包含内联样式、Word命名空间标记）**和RTF格式数据，而你当前的代码要么自己修改了HTML结构（比如替换换行、添加data-tsv），要么只提取了基础HTML，丢失了Word识别样式的关键信息。

方案1：获取浏览器原生生成的Word兼容HTML

直接使用剪贴板中浏览器自动生成的HTML，而非自己处理的innerHTML，同时配置html-to-docx启用Word兼容模式：

const exportToDocx = async () => {
    const contentElement = contentRef.current;
    if (!contentElement) return;

    // 原生复制，让浏览器生成Word兼容的HTML
    const range = document.createRange();
    range.selectNode(contentElement);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();

    // 读取剪贴板中的原生HTML（带Word兼容标记）
    const clipboardItems = await navigator.clipboard.read();
    let wordHtml = '';
    for (const item of clipboardItems) {
        if (item.types.includes('text/html')) {
            const blob = await item.getType('text/html');
            wordHtml = await blob.text();
            break;
        }
    }

    // 用带Word兼容标记的HTML生成DOCX，开启样式保留配置
    const fileBuffer = await HTMLtoDOCX(wordHtml, null, {
        useInlineStyles: true, // 强制使用内联样式，匹配Word解析逻辑
        preserveStyles: true,  // 保留原始样式属性
        orientation: 'portrait'
    });
    saveAs(fileBuffer, 'exported.docx');
};

注意：移除原代码中对HTML的手动修改（比如replace(/\n/g, '<br>')和表格的data-tsv处理），这些操作会破坏浏览器生成的兼容结构。

方案2：模拟Word粘贴逻辑（桌面端可选）

如果是Electron等桌面应用，可直接读取剪贴板的RTF数据（这是Word优先识别的格式），写入临时文件后转DOCX：

// Electron环境示例
const { clipboard, shell } = require('electron');
const fs = require('fs');
const path = require('path');
const os = require('os');
const { convert } = require('rtf-to-docx');

const exportToDocx = async () => {
    // 执行原生复制
    handleCopyToClipboard();

    // 读取剪贴板RTF数据
    const rtfContent = clipboard.readRTF();
    if (!rtfContent) return;

    // 转换RTF到DOCX
    const docxBuffer = await convert(rtfContent);
    const outputPath = path.join(os.homedir(), 'exported.docx');
    fs.writeFileSync(outputPath, docxBuffer);

    // 打开生成的文件
    shell.openPath(outputPath);
};

方案3：折中方案：打印转PDF再转DOCX

如果上述方案仍有样式偏差，可先将页面内容导出为PDF（用浏览器原生window.print()或jsPDF），再用WebAssembly版的PDF转DOCX工具（如pdf2docx-wasm）转换，这种方式样式还原度极高，但会损失部分文本可编辑性。

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