使用html-docx.js插件，引入的样式无效？

Z时代
2024-02-05
分类：IT

获取要导出的两张表，写了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。

下面是我修改后的代码

daochuWord() {
  let contentHtml = document.getElementById("table1").innerHTML;
  let content2Html = document.getElementById("table2").innerHTML;
  let cssHTML = `
    table td {
      border: 3pt solid #FF0000;
      font-family: '宋体';
    }
    textarea {
      border: none;
      padding: 0;
      margin: 0;
      margin-top: 6pt;
      font-size: 16pt;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      border: 2pt solid #000000;
    }
    td {
      padding: 0 6pt;
      text-align: center;
      font-size: 17pt;
      box-sizing: border-box;
    }
    .tal {
      text-align: left;
    }
    .tac {
      text-align: center;
    }
    .zong {
      height: 5em;
      display: inline-block;
    }
    .title {
      text-align: center;
      font-size: 32pt;
      letter-spacing: 15pt;
      margin: 11pt 0;
      color: #000;
      font-family: '宋体';
      font-weight: 400;
      margin-bottom: 9pt;
      padding-left: 20pt;
    }
    .photo {
      position: relative;
    }
    .photo img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .jianli {
      width: 100pt;
      text-align: left;
      vertical-align: baseline;
      overflow: auto;
      box-sizing: border-box;
    }
    /* 表格边框和交替背景色 */
    .table-bordered td, .table-bordered th {
      border: 2pt solid #000;
    }
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: #f9f9f9;
    }
  `;
  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 class="table-bordered table-striped">
          ${contentHtml}
        </table>
        <table class="table-bordered table-striped">
          ${content2Html}
        </table>
        <div class="cbr">出表人:</div>
      </body>
    </html>
  `;
  let converted = htmlDocx.asBlob(content);
  FileSaver.saveAs(converted, "干部任免表.docx");}