html-docx-js 在创建 docx 文件时无法应用外部 css class 样式

Question

使用 html-docx-js 模块，我可以将 html 内容转换为 docx 格式。但是我运行遇到了一个问题，我的大部分 css 都是从外部加载的，并且 html-docx-js 不应用任何样式。

简化代码示例：

const html = '<html><head><link rel="stylesheet" type="text/css" href="/styles/page.css"></head><body><div className={bold}>I am bold!</div></body></html>'
saveAs(htmlDocx.asBlob(html), 'bold.docx');

建议使用juice library，但是也没用。

有人知道在创建 docx 文件时是否有解决办法让 html-docx-js 加载外部 css 吗？

Answer 1

经过一些研究后，我找到了解决我的问题的有效方法：

有一个名为 juice 的模块，它允许应用指定的 css 内联。

Juice 需要 css 的副本，我必须单独加载它。

此外，由于 html-docx-js 只能读取元素中第一个 css 样式定义，我不得不稍微调整 css 和 html 以适应那。

最终代码如下所示：

    import htmlDocx from 'html-docx-js/dist/html-docx';
    import saveAs from 'file-saver';
    const juice = require('juice');

     let getIndex = new Promise((resolve, reject) => {
      this.requests('GET', '/styles/index.css')
        .then(data =>
          data.text().then(css => {
            resolve(css);
          })
        )
        .catch(error => reject(error));
    });

    getIndex
      .then(css => {
        let html =
          '<!DOCTYPE html><html><head lang="en"><style></style>' +
          '<meta charset="UTF-8"><title>Report</title></head><body>' +
          this.report.innerHTML +
          '</body></html>';

        html = juice.inlineContent(html, css);
        let docx = htmlDocx.asBlob(html);
        saveAs(docx, 'report.docx');
      })
      .catch(error => {
        console.log(error);
      });

Answer 2

您可以在 head 标签中使用 CSS class，但您必须 select 元素标签和class名称在一起。

看起来像这样：

<head>
...
<style type="text/css">
    div.MyCustomClass {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
</head>
<body>
...
<div class="MyCustomClass">
...
</div>
</body>

html-docx-js 在创建 docx 文件时无法应用外部 css class 样式

html-docx-js is not abe to apply external css class styles when it creates docx file

html

javascript

css

docx

reactjs