html-docx-js 在创建 docx 文件时不能应用外部 css 类样式

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 类，但必须同时选择元素标签和类名。

它看起来像这样：

<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 类样式

问题描述

2 个解决方案

解决方案1
4 已采纳 2019-02-18 06:54:27

解决方案2
0 2021-04-02 16:32:19

html-docx-js 在创建 docx 文件时不能应用外部 css 类样式

问题描述

2 个解决方案

解决方案1 4 已采纳 2019-02-18 06:54:27

解决方案2 0 2021-04-02 16:32:19

解决方案1
4 已采纳 2019-02-18 06:54:27

解决方案2
0 2021-04-02 16:32:19