1.2.1 • Published 1 year ago

xh-htmlword v1.2.1

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

安装

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",
  drawCanvas: [".tree", "#btn"],
});

示例 vue 模版

<template>
  <div class="export-box" style="width: 565pt">
    <div id="main1"></div>
    <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 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>

使用须知

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

注意事项

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

开源协议

ISC

1.2.0

1 year ago

1.2.1

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.1

1 year ago

1.1.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago