安装

npm install xh-htmlword

导入

import handleExportWord from "xh-htmlword";

页面 dom 生成后调用

//在需要分页的地方添加 <span><br clear="all" style="page-break-before: always" /> </span> 即可分页

// dom：需要渲染的html父盒子标签 ， 类型：string 例如 id/class
//  fileName：文件名称 类型：string
//  timeOut:设置导出图片加载 超时时间 默认值 5000  (5s)
//  callBack：导出成功回调函数
//  options:配置项  类型：object 例如可传 {left:1440,right:1440} 控制页边距
//  defultImg: 错误或者超时图片 默认图片地址 类型：string
//  className:当前组件的class属性名标识 类型：string  配置此项后可以在标签写入class样式
//  drawCanvas:当当前页面有比较复杂的样式或组件（element-ui等） 页面中可以用样式标签将它包裹起来然后将标签 传入drawCanvas数组中 开启转换
handleExportWord({
  dom: ".export-box",
  fileName: "cs",
  timeOut: 3000,
  callBack: (res) => {
    console.log("导出成功"); //res 文档流
  },
  defultImg: "",
  className: "export-box", //一般给导出文件的最外层盒子的class 用于标记
  drawCanvas: [".tree", "#btn"],
});

示例 vue 模版

<template>
  <div class="export-box" style="width: 565pt">
    <div id="main1"></div>
    <p style="text-align: center">
      <span
        class="title"
        >深水汴北配套管网运维日报表</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 data.personnel"
            :key="index"
            style="color: #595959; font-size: 9pt"
          >
            <span v-if="index !== 0"> &nbsp;</span>
            <span>{{ item.title }}</span>
            <span>
              {{ item.label }}
            </span>
          </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>
      <!-- 巡检记录 -->
      <tr style="border: 1px solid #cccccc; height: 36pt">
        <td
          colspan="6"
          style="
            text-align: center;
            border: 1px solid #cccccc;
            background-color: #f1f1f1;
            color: rgb(89, 89, 89);
            font-size: 14pt;
            letter-spacing: 1pt;
          "
        >
          巡检记录
        </td>
      </tr>
      <tr>
        <td
          colspan="6"
          style="
            text-align: center;
            border: 1px solid #cccccc;
            background-color: #f1f1f1;
            color: rgb(89, 89, 89);
            font-size: 14pt;
            letter-spacing: 1pt;
          "
        >
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F0713%2F219519055_1_20210407012803425&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716081866&t=af941e4f60f743e1081f7cda8fcfb299"
            width="565pt"
            height="200pt"
          />
        </td>
      </tr>
    </table>

    <div class="btn">
      <el-progress :percentage="50" />
      <el-progress :percentage="100" :format="format" />
      <el-progress :percentage="100" status="success" />
      <el-progress :percentage="100" status="warning" />
      <el-progress :percentage="50" status="exception" />

      <el-steps style="max-width: 600px" :active="0" finish-status="success">
        <el-step title="Step 1" />
        <el-step title="Step 2" />
        <el-step title="Step 3" />
      </el-steps>
    </div>

     <span><br clear="all" style="page-break-before: always" /> </span>
    分页

    <span><br clear="all" style="page-break-before: always" /> </span>
    分页

  </div>

  <button @click="handleExport">导出</button>
</template>

<script setup>
import { onMounted, nextTick } from "vue";
import handleExportWord from "xh-htmlword";

// 标准化执行情况
const executionList = ["优秀", "良好", "中等", "差"];

// 巡检记录
const data = {
  head: [
    [
      { title: "作业日期：", label: "2024年01月25日", width: "150pt" },
      { title: "填表人：", label: "吴宇、白阳", width: "110pt" },
      {
        title: "运维单位：",
        label: "安徽中益达管道疏通有限公司",
        width: "200pt",
      },
      { title: "天气：", label: "多云（24°C）", width: "120pt" },
    ],
    [
      {
        title: "现场负责人：",
        label: "吴宇",
        width: "150pt",
      },
      {
        title: "手机号码：",
        label: "13112345678",
        width: "110pt",
      },
      {
        title: "项目负责人：",
        label: "吴宇",
        width: "205pt",
      },
      {
        title: "手机号码：",
        label: "13198765432",
        width: "120pt",
      },
    ],
  ],
  personnel: [
    {
      title: "安全员:",
      label: "1人",
    },
    {
      title: "监护人员:",
      label: "1人",
    },
    {
      title: "施工人员:",
      label: "3人",
    },
    {
      title: "巡查人员:",
      label: "2人",
    },
    {
      title: "潜水员:",
      label: "1人",
    },
    {
      title: "有限空间作业人员:",
      label: "1人",
    },
  ],
  execution: 1,
};

const handleExport = () => {
  handleExportWord({
    dom: ".export-box",
    fileName: "测试文件",
    drawCanvas: [".btn"],
  });
};
</script>

<style scoped lang="scss">
.export-box {
  .title {
    font-family: 宋体;
    font-weight: bold;
    color: red;
    min-height: 16pt;
    font-size: 16pt;
  }
}
</style>

使用须知

由于 html-docx-js 已经无人维护版本较老（直接使用坑非常多），现修改使用成 xuhao-htmlword 用于生成 word 文档，已解决老语法兼容问题, 添加部分 ts 声明 以及图片跨域文本处理等缺陷升级,交流联系：[email protected]

注意事项

html 模版需要全局使用行内样式，否则生成的 word 文档样式不生效，img 标签可以使用 width/height 属性设置宽高,建议全局使用 pt 作为尺寸单位 绝大部分 css3 样式无法生效，建议直接使用原生 table 标签编写

开源协议

ISC