将 HTML（带有 CSS 样式）导出为 Word 文档（.doc 或 .docx）

问题描述 投票：0回答：1

我正在尝试将一个简单的页面导出为Word文档，但似乎找不到任何方法来做到这一点。我尝试的任何方法都只是导出带有字体颜色的文本，但仅此而已。我想要的是正确使用 css 样式的导出方法。这是纯 html、css 和 javascript，没有后端语言。

我尝试过：

  • 在 Word 2016 中打开网址
  • 使用 chrome 扩展导出
  • 使用FileSaver.js和wordexport.js导出

在所有 3 种情况下，样式均缺失。特别是字体和内容样式被忽略。保存为 pdf 效果非常好。我有从未使用过的 css 打印样式，即使将相同的样式直接添加到元素中，它仍然不会显示在 .doc 文件中。

有什么合理的解决办法吗？

html css ms-word export export-to-word
1个回答
0
投票

据我所知，在您描述的限制范围内解决问题的最接近的工具是jQuery-Word-Export。您可以点击这里的demo看看这是否是您想要的。

实际代码很短，我在这里重写了它，没有参考 jQuery：

import saveAs from "file-saver"

export function htmlCssExportWord(
  html,
  styles = "",
  filename = "exported-document.doc"
) {  
  const statiC = {
    mhtml: {
      top:
        "Mime-Version: 1.0\nContent-Base: " +
        window.location.href +
        '\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +
        window.location.href +
        "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
      head: '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n</head>\n',
      body: "<body>_body_</body>",
    },
  }

  // Prepare bottom of mhtml file with image data
  const mhtmlBottom = "\n" + "--NEXT.ITEM-BOUNDARY--"

  // Aggregate parts of the file together
  const fileContent =
    statiC.mhtml.top.replace(
      "_html_",
      statiC.mhtml.head.replace("_styles_", styles) +
        statiC.mhtml.body.replace("_body_", html)
    ) + mhtmlBottom

  // Create a Blob with the file contents
  const blob = new Blob([fileContent], {
    type: "application/msword;charset=utf-8",
  })
  saveAs(blob, filename)
}

这里是代码的演示，我正在将其转换为小型 npm 包。

请注意，此解决方案依赖于以下事实：Microsoft Word 可以将带有 .doc 后缀的文件作为“单页网页”(mht) 文件打开、保存和编辑。进一步请注意，Microsoft Word 无法理解所有现代 CSS，因此某些 CSS 样式将无法正确显示。

有关各种可用方法的调查，请参阅为什么不使用 docx？有关 这个用于 html 到 doc 转换的 Ruby 工具的 Wiki 条目。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.