极客观点
项目管理
HarmonyOS
获取要导出的两张表，写了css的样式，只有table的样式生效，其余都没有生效。
daochuWord() {
let contentHtml = document.getElementById("table1").innerHTML;
let content2Html = document.getElementById("table2").innerHTML;
let cssHTML = `
table td {
border: 3px red solid;
font-family: '宋体';
}
textarea {
border: none;
padding: 0;
margin: 0;
margin-top: 6px;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
border: 2px #000 solid;
}
td {
padding: 0 6px;
text-align: center;
font-size:17px;
box-sizing: border-box;
}
.tal {
text-align: left;
}
.tac {
text-align: center;
}
.zong {
height: 5em;
display: inline-block;
}
.title {
text-align: center;
font-size: 32px;
letter-spacing: 15px;
margin: 11px 0;
color: #000;
font-family: '宋体';
font-weight: 400;
margin-bottom: 9px;
padding-left: 20px;
/* letter-spacing: 15px; */
}
.photo {
position: relative;
}
.photo img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.jianli {
width: 100px;
text-align: left;
vertical-align: baseline;
overflow: auto;
box-sizing: border-box;
}
`;
let content = `
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
${cssHTML}
</style>
</head>
<body>
<div class="title">干部任免审批表</div>
<table>
${contentHtml}
</table>
<table>
${content2Html}
</table>
<div class="cbr">出表人:</div>
</body>
</html>`此时打印出content，可以获取到拼接后的数据；但就是样式不生效；
let converted = htmlDocx.asBlob(content);
FileSaver.saveAs(converted, "干部任免表.docx");
}
在导出 Word 时，由于 Word 的样式不会直接读取你写在 HTML 中的样式，因此需要使用一些特殊的类和样式来将 HTML 样式应用于 Word。
在你提供的代码中，缺少了table-bordered和table-striped这两个类的定义。这两个类在 Bootstrap 中是用于设置表格边框和交替背景色的。如果你想使用这些类，需要先导入 Bootstrap 样式文件。
另外，由于 Word 使用的是不同的渲染引擎，一些 CSS 样式可能不支持（例如文本阴影等），因此有些样式可能无法在 Word 中生效。可以尝试使用 Word 中支持的样式
font-size 替换为字号，例如：font-size: 16px; -> font-size:16pt;；
margin 替换为页边距，例如：margin: 0 -> margin: 0pt；
padding 替换为内边距，例如：padding: 0 -> padding: 0pt。
下面是我修改后的代码
在这个代码中，添加了.table-bordered和.table-striped这两个类，并定义了它们的边框和交替背景色。同时修改了一些样式单位和取值，例如将px替换为pt，并将字号统一为pt。你可以根据实际需要进行调整。