js html转word

作者：断晴星魂发布日期:2026-06-04 浏览:13

// 使用 js 将 HTML 转换为 Word 文档的示例代码

// 引入必要的库，例如 FileSaver.js 和 docxtemplater.js
// 可以通过 CDN 或 npm 安装这些库

// CDN 引入方式：
// <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.24.0/docxtemplater.min.js"></script>

function htmlToWord(htmlContent) {
    // 创建一个隐藏的 iframe 用于生成 Word 文档
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    document.body.appendChild(iframe);

    // 获取 iframe 的文档对象
    var iframeDoc = iframe.contentWindow || iframe.contentDocument;
    if (iframeDoc.document) {
        iframeDoc = iframeDoc.document;
    }

    // 将 HTML 内容写入 iframe 的文档中
    iframeDoc.open();
    iframeDoc.write('<html><head><meta charset="utf-8"></head><body>' + htmlContent + '</body></html>');
    iframeDoc.close();

    // 创建一个 Blob 对象，包含 HTML 内容
    var blob = new Blob([iframeDoc.documentElement.outerHTML], { type: "application/msword" });

    // 使用 FileSaver.js 保存文件
    saveAs(blob, "document.doc");

    // 移除 iframe
    document.body.removeChild(iframe);
}

// 示例调用
var htmlContent = "<h1>Hello World</h1><p>This is a test document.</p>";
htmlToWord(htmlContent);

解释说明：

引入库：此示例使用了 FileSaver.js 和 docxtemplater.js 来处理文件保存和 Word 文档生成。你可以通过 CDN 或 npm 安装这些库。
创建隐藏的 iframe：我们创建一个隐藏的 iframe，用于临时生成 Word 文档的内容。
写入 HTML 内容：将传入的 HTML 内容写入 iframe 的文档中，并确保编码为 UTF-8。
创建 Blob 对象：将 iframe 中的 HTML 内容转换为一个 Blob 对象，类型为 application/msword。
保存文件：使用 FileSaver.js 提供的 saveAs 方法保存生成的 Word 文件。
移除 iframe：操作完成后，移除 iframe 以保持页面整洁。

这个方法可以将简单的 HTML 内容转换为 Word 文档并下载。对于更复杂的需求，建议使用专门的库如 docx 或 mammoth。

上一篇：js svg转png

下一篇：js word转html