1.2.1 • Published 1 year ago
xh-htmlword v1.2.1
安装
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"> </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"> </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