Xuhao-htmlword NPM

安装

npm install xuhao-htmlword

导入

import handleExportWord from "xuhao-htmlword";

页面 dom 生成后调用

// dom：需要渲染的html父盒子标签 ， 类型：string 例如 id/class
//  fileName：文件名称 类型：string
//  timeOut:设置导出图片加载 超时时间 默认值 5000  (5s)
//  callBack：导出成功回调函数
//  options:配置项  类型：object 例如可传 {left:1440,right:1440} 控制页边距
handleExportWord({
  dom: ".export-box",
  fileName: "cs",
  timeOut: 3000,
  callBack: () => {
    console.log("导出成功");
  },
});

示例 vue 模版

  <div class="export-box" style="width: 565pt">
    <p style="text-align: center">
      <span
        style="
          font-family: 宋体;
          font-weight: bold;
          color: rgb(0, 0, 0);
          min-height: 16pt;
          font-size: 16pt;
        "
        >深水汴北配套管网运维日报表</span
      >
    </p>
    <table
      style="width: 565pt; border-collapse: collapse; border: 1px solid #dddddd"
    >
      <colgroup>
        <col style="width: 89.65pt" />
        <col style="width: 44.05pt" />
        <col style="width: 121.5pt" />
        <col style="width: 103.85pt" />
        <col style="width: 73.3pt" />
        <col style="width: 106.3pt" />
      </colgroup>

      <tr
        v-for="(item, index) in data.head"
        :key="index"
        style="border: 1px solid #cccccc; height: 25.5pt"
      >
        <td
          v-for="(item2, index) in item"
          :key="index"
          style="padding-left: 5.4pt; border: 1px solid #cccccc"
          :style="{ width: item2.width }"
          :colspan="index % 2 == 0 ? 2 : 1"
        >
          <span
            style="
              font-weight: bold;
              color: #595959;
              font-size: 9pt;
              margin-right: 3pt;
            "
          >
            {{ item2.title }}</span
          >
          <span style="color: #595959; font-size: 9pt">
            {{ item2.label }}
          </span>
        </td>
      </tr>

      <tr style="border: 1px solid #cccccc; height: 25.5pt">
        <td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
          <span
            style="
              font-weight: bold;
              color: #595959;
              font-size: 9pt;
              margin-right: 3pt;
            "
          >
            标准化执行情况：</span
          >
          <span
            v-for="(item, index) in executionList"
            :key="index"
            style="color: #595959; font-size: 9pt"
          >
            <span v-if="index !== 0">&nbsp;&nbsp;&nbsp;</span>
            <span>{{ data.execution == index ? "√" : "□" }}</span>
            <span>
              {{ item }}
            </span>
          </span>
        </td>
      </tr>
    </table>
  </div>