将 HTML blob 转换为 DOCX blob

Convert HTML blob to DOCX blob

提问人:Omer Messer 提问时间:11/9/2023 更新时间:11/9/2023 访问量:29

问:

我的应用程序的目标是将我在屏幕上看到的内容导出为 docx 文件。

我想出的 1 个解决方案是复制到剪贴板,然后使用“html-to-docx”或“html-docx-js”将 HTML blob 转换为 docx blob。

此解决方案之所以有效,部分原因是无论是复制到剪贴板并粘贴到 Word 中还是仅使用包,输出样式都不同。

我正在寻找的结果就像直接复制和粘贴,但使用代码。

复制html的代码:

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);
    }

使用复制内容的代码:

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()

也许有人知道达到相同输出的好方法?

javascript html css reactjs node.js

评论

0赞 Dai 11/9/2023
“我的应用程序的目标是将我在屏幕上看到的内容导出为 docx 文件。”- 请问你为什么要这样做? 对于技术文档来说,这是一种糟糕的格式.......docx
0赞 Omer Messer 11/9/2023
确定!这是我的团队领导的要求。我一整天都被困在这一点上。

答: 暂无答案