前端HTML转word文档，绝对有效！！！ - ToB企服应用市场:ToB评测及商务社交产业平台

<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>
</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 = () => {
// 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: "托尔斯泰222",
drawCanvas: [".btn"],
});
};
</script>

复制代码