Javascript html docx js在创建docx文件时不能应用外部css类样式
使用HTMLDocxJS模块，我能够将html内容转换为docx格式。然而，我遇到了一个问题，我的大多数css都是从外部加载的，html docx js不应用任何样式 简化代码示例：Javascript html docx js在创建docx文件时不能应用外部css类样式,javascript,html,css,reactjs,docx,Javascript,Html,Css,Reactjs,Docx,使用HTMLDocxJS模块，我能够将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}&g
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');
consthtml='I am bold！'
saveAs（htmlDocx.asBlob（html），'bold.docx'）；
有人知道在创建docx文件时是否有办法让html docx js加载外部css吗？在做了一些研究之后，我找到了解决问题的有效方法： 有一个名为juice的模块，它允许内联应用指定的css Juice需要一份css，我必须单独加载 此外，由于HTMLDocxJS只能读取元素中的第一个css样式定义，因此我必须稍微调整css和html以适应这一点 最终代码如下所示：
从“html docx js/dist/html docx”导入htmlDocx；
从“文件保护程序”导入另存为；
const juice=需要（“juice”）；
让getIndex=新承诺（（解决、拒绝）=>{
this.requests（'GET'，'/styles/index.css'）
。然后（数据=>
data.text（）.then（css=>{
解决（css）；
})
)
.catch（错误=>拒绝（错误））；
});
获取索引
。然后（css=>{
让html=
'' +
“报告”+
this.report.innerHTML+
'';
html=juice.inlineContent（html，css）；
让docx=htmlDocx.asBlob（html）；
saveAs（docx，'report.docx'）；
})
.catch（错误=>{
console.log（错误）；
});
从“html docx js/dist/html docx”导入htmlDocx；
从“文件保护程序”导入另存为；
const juice=需要（“juice”）；
让getIndex=新承诺（（解决、拒绝）=>{
this.requests（'GET'，'/styles/index.css'）
。然后（数据=>
data.text（）.then（css=>{
解决（css）；
})
)
.catch（错误=>拒绝（错误））；
});
获取索引
。然后（css=>{
让html=
'' +
“报告”+
this.report.innerHTML+
'';
html=juice.inlineContent（html，css）；
让docx=htmlDocx.asBlob（html）；
saveAs（docx，'report.docx'）；
})
.catch（错误=>{
console.log（错误）；
});
<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>
...
div.MyCustomClass{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
...
...
<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>
...
div.MyCustomClass{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
...
...