纯前端导出word手写复杂表格，并还原成word。百分百还原表格。一文搞定前端表格导出为word

V2AS问路

纯前端导出word手写复杂表格，并还原成word。百分百还原表格。一文搞定前端表格导出为word

阅读原文时间：2023年09月01日阅读：1

本次的需求是手写一个养老院老人生活能力评定表，并且要能够录入信息，最终导出

表格因为有七页所以代码很多，可以不用看表格模板的详细代码。

先贴上最终效果图

填写完导出之后

基本上实现了样式的百分百还原导出

web端的表格主要实现思路就是用原生table画表格，嵌入饿了么ui和vue的条件渲染来实现编辑。

这里要记住两个属性：

rowspan：代表行跨度也就是一个单元格能够合并几行

colspan：代表列跨度，也就是一个单元格能够跨几列

贴上web表格的代码

A：老年人能力评估基本信息表

A.1 评估基本信息表

评估编号

评估基准日期

评估原因

1 接受服务前初评

2 接受服务后的常规评估

3 状况发生变化后的即时评估

4 因评估结果有疑问进行的复评

A.2 入住老人基本信息

姓名

性别

出生日期

身份证号

社保卡号

民族

文化程度

宗教信仰

婚姻状况

居住情况

医疗费用支付方式

经济来源

疾病诊断

近30天内意外事件

B:老年人能力评估

B.1 日常生活活动

进食：指用餐具将食物由容器送到口中、咀嚼、吞咽等过程

{{ dailyBehaviorA === "" || dailyBehaviorA == null ? "" : dailyBehaviorA + "分" }}

10分，可独立进食(在合理的时间内独立进食准备好的食物)

5分，需部分帮助(进食过程中需要一定帮助，如协助把持餐具)

0分，需极大帮助或完全依赖他人,或有留置胃管

洗澡

{{ dailyBehaviorB === "" || dailyBehaviorB == null ? "" : dailyBehaviorB + "分" }}

5分，准备好洗澡水后，可自己独立完成洗澡过程

0分，在洗澡过程中需他人帮助

修饰：指洗脸、刷牙、梳头等

{{ dailyBehaviorC === "" || dailyBehaviorC == null ? "" : dailyBehaviorC + "分" }}

5分，可自己独立完成

0分，需他人帮助

穿衣：指穿脱衣服、系扣、拉拉链、穿脱鞋袜系鞋带

{{ dailyBehaviorD === "" || dailyBehaviorD == null ? "" : dailyBehaviorD + "分" }}

10分，可独立完成

5分，需部分帮助(能自己穿脱，但需他人帮助整理衣物、系扣/鞋带、拉拉链)

0分，需极大帮助或完全依赖他人

大便控制

{{ dailyBehaviorE === "" || dailyBehaviorE == null ? "" : dailyBehaviorE + "分" }}

10分，可控制大便

0分，完全失控

小便控制

{{ dailyBehaviorF === "" || dailyBehaviorF == null ? "" : dailyBehaviorF + "分" }}

10分，可控制小便

0分，完全失控，或留置导尿管

包括去厕所、解开衣裤、擦净、整理衣裤、冲水

{{ dailyBehaviorG === "" || dailyBehaviorG == null ? "" : dailyBehaviorG + "分" }}

10分，可独立完成

0分，需极大帮助或完全依赖他人

床椅转移

{{ dailyBehaviorH === "" || dailyBehaviorH == null ? "" : dailyBehaviorH + "分" }}

15分，可独立完成

5分，需极大帮助（较大程度上依赖他人搀扶和帮助）

0分，完全依赖他人

平地行走

{{ dailyBehaviorI === "" || dailyBehaviorI == null ? "" : dailyBehaviorI + "分" }}

15分，可独立在平地上行走45m

{{ "10分，需部分帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题，在一定度上需他人地搀扶或使用拐杖、助行器等辅助用具）" }}

5分，需极大帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题，在较大程度上依赖他人搀扶，或坐在轮椅上自行移动）

0分，完全依赖他人

上下楼梯

{{ dailyBehaviorJ === "" || dailyBehaviorJ == null ? "" : dailyBehaviorJ + "分" }}

10分，可独立上下楼梯（连续上下10-15个台阶）

0分，需极大帮助或完全依赖他人

日常生活活动总分

上述10个项目得分之和

日常生活活动分级

0能力完好：总分100分

2中度受损：总分45-60分

3重度受损：总分≤40分

B.2精神状态评估

B.2. 1 认知功能

测验

“我说三样东西，请重复一遍，并记住，一会儿会问您”：苹果、手表、国旗

（2）回忆词语：“现在请您告诉我，刚才我要您记住的三样东西是什么？”

{{ mentalityA === "" || mentalityA == null ? "" : mentalityA + "分" }}

0分，画钟正确（画出一个闭锁圆，指针位置准确），且能回忆出2-3个词

1分，画钟错误（画的圆不闭锁，或指针位置不准确），或只回忆出0-1个词

2分，已确诊为认知障碍，如老年痴呆-1个词

攻击行为

{{ mentalityB === "" || mentalityB == null ? "" : mentalityB + "分" }}

0分，无身体攻击行为（如打/踢/推/饺/抓/摔东西）和语言攻击行为(如骂人、语言威胁、,尖叫)

2分，每周有几次身体攻击行为，或每日有语言攻击行为

抑郁症状

{{ mentalityC === "" || mentalityC == null ? "" : mentalityC + "分" }}

0分，无

2分，有自杀念头或自杀行为

精神状态总分

上述3个项目得分之和

精神状态分级

0能力完好：总分为0分

2中度受损：总分2-3分

3重度受损：总分4-6分

B.3 感知觉与沟通评估

意识水平

{{ perceptionCommunicationA === "" || perceptionCommunicationA == null ? "" : perceptionCommunicationA + "分" }}

0分，神志清醒，对周围环境警觉

{{ "1分，嗜睡，表现为睡眠状态过度延长。当呼唤或推动患者的肢体时可唤醒，并能进行正确的交谈或执行指令，停止刺激后又继续入睡" }}

2分，昏睡，一般的外界刺激不能使其觉醒，给予较强烈的刺激时可有短时的意识清醒，醒后可简短回答提问，当刺激减弱后又很快进入睡眠状态

3分，昏迷，处于浅昏迷时对疼痛刺激有回避和痛苦表情：处于深昏迷时对刺激无反应《若评定为昏迷，直接评定为重度失能，可不进行以下项目的评估）

视力: 若平日带老花镜或近视镜，应在佩戴眼镜的情况下评估

{{ perceptionCommunicationB === "" || perceptionCommunicationB == null ? "" : perceptionCommunicationB + "分" }}

0分，能看清书报上的标准字体

2分，视力有限，看不清报纸大标题，但能辨认物体

3分，辨认物体有困难，但眼睛能跟随物体移动，只能看到光、颜色和形状

4分，没有视力，眼睛不能跟随物体移动

听力: 若平时佩戴助听器，应在佩戴助听器的情况下评估

{{ perceptionCommunicationC === "" || perceptionCommunicationC == null ? "" : perceptionCommunicationC + "分" }}

0分，可正常交谈，能听到电视、电话、门铃的声音

2分，正常交流有些困难，需在安静的环静或大声说话才能听到

3分，讲话者大声说话或说话很慢，才能部分听见

4分，完全听不见

沟通交流: 包括非语言沟通

{{ perceptionCommunicationD === "" || perceptionCommunicationD == null ? "" : perceptionCommunicationD + "分" }}

0分，无困难，能与他人正常沟通和交流

2分，表达需要或理解有困难，需频繁重复或简化□头表达

3分，不能表达需要或理解他人的话

感知觉与沟通分级

0 能力完好：意识清醒，且视力和听力评为0或1，沟通评为0

1 轻度受损：意识清醒，但视力或听力中至少一项评为2，或沟通评为1

2 中度受损：意识清醒，但视力或听力中至少一项评为3，或沟通评为2，或嗜睡，视力或听力评定为3及以下，沟通评定为2及以下

3 重度受损：意识清醒或嗜睡，但视力或听力中至少一项评为4，或沟通评为3；或昏睡/昏迷

B.4 社会参与与评估

生活能力

{{ socialParticipationA === "" || socialParticipationA == null ? "" : socialParticipationA + "分" }}

0分，除个人生活自理外（如饮食、洗漱、穿戴、二便），能料理家务（如做饭、洗衣）或当家管理事务

2分，个人生活能自理，只有在他人帮助下才能做些家务，但质量不好

3分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱

4分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱

工作能力

{{ socialParticipationB === "" || socialParticipationB == null ? "" : socialParticipationB + "分" }}

0分，原来熟练的脑力工作或体力技巧性工作可照常进行

2分，原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘

3分：对熟练工作只有一些片段保留，技能全部遗忘

4分，对以往的知识或技能全部磨灭

时间/空间定向

{{ socialParticipationC === "" || socialParticipationC == null ? "" : socialParticipationC + "分" }}

0分、时间观念（年、月、日、时）清楚；可单独出远门，能很快掌握新环境的方位

2分，时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位

3分，时间观念很差，年、月、日不清楚，可知上午或下午；只能在左邻右舍间串门，对现住地不知名称和方位

4分，无时间观念;不能单独外出

人物定向

{{ socialParticipationD === "" || socialParticipationD == null ? "" : socialParticipationD + "分" }}

0分，知道周围人们的关系，知道祖孙、叔俯、姑姨、侄子侄女等称谓的意义；可分辨陌生人的大致年龄和身份，可用适当称呼

2分，只能称呼家中人，或只能照样称呼，不知其关系，不辨辈分

3分，只认识常同住的亲人，可称呼子女或孙子女，可辨熟人和生人

4分，只认识保护人，不辨熟人和生人

社会交往能力

{{ socialParticipationE === "" || socialParticipationE == null ? "" : socialParticipationE + "分" }}

0分，参与社会，在社会环境有一定的适应能力，待人接物恰当

2分，脱离社会，可被动接触，不会主动待人，谈话中很多不适词句，容易上当受骗

3分，勉强可与人交往，谈吐内容不清楚，表情不恰当

4 分，难以与人接触

社会参与总分

上述5个项目得分之和

社会参与分级

0能力完好：总分0-2分

1 轻度受损：总分3-7分

2 中度受损：总分8-13分

3 重度受损：总分14-20分

C:老年人能力评估报告

生活能力

C.1.1 日常生活活动：{{ dailyBehaviorL + "级" }}

C.1.2 精神状态：{{ mentalityE + "级" }}

C.1.3 感知觉与沟通:{{ perceptionCommunicationE + "级" }}

C.1.4 社会参与：{{ socialParticipationG + "级" }}

老年人能力等级标准

0 能力完好：日常生活活动、精神状态、感知觉与沟通分级均为0，社会参与的分级为0或1。

1 轻度失能：日常生活活动分级为0，但精神状态、感知觉与沟通中至少一项分级为1及以上，或社会参与的分级为2；或日常生活活动分级为1，精神状态、感知觉与沟通、社会参与中至少有一项的分级为0或1。

2 中度失能：日常生活活动分级为1，但精神状态、感知觉与沟通、社会参与均为 2，或有一项为 3;或日常生活活动分级为2，且精神状态、感知觉与沟通、社会参与中有1-2项的分级为1或2。

3 重度失能：日常生活活动的分级为3;或日常生活活动、精神状态、感知觉与沟通、社会参与分级均为2；或日常生活活动分级为2，且精神状态、感知觉与沟通、社会参与中至少有一项分级为3。

等级变更条款

0有认知障碍/痴呆、精神疾病者，在原有能力级别上提高一个等级

1近30天内发生过 2次及以上跌倒、噎食、自杀、走失者，在原有级别上提高一个等级

2处以昏迷状态者，直接评定为重度失能:

3若初步等级确定为“3重度失能”，则不考虑上述1-3中各情况对最终等级的影响，等级不再提高

老年人能力初步等级

老年人能力最终等级

评估员签名

信息提供者签名

　　控制编辑的基本思路就是加上一个flag xxxEdit来控制是否是编辑状态。是编辑状态就展示饿了么ui的编辑控件，不是就展示编辑控件绑定的value

　　下面说如何进行导出word

1.下载 html-docx-js，file-saver

　　npm install html-docx-js

npm install file-saver

　　2.在要使用的地方引入相关插件

　　import htmlDocx from 'html-docx-js/dist/html-docx'

　　import saveAs from 'file-saver'

导出的方法

gohtml() {
const app = document.querySelector("#htmltable");
const cloneApp = app.cloneNode(true);
const canvases = app.getElementsByTagName("canvas");
const cloneCanvases = cloneApp.getElementsByTagName("canvas");
const promises = Array.from(canvases).map((ca, index) => {
return new Promise((res) => {
const url = ca.toDataURL("image/png", 1);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
res();
};
img.src = url;
// 生成img插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(
img,
cloneCanvases[index]
);
});
});
// 移除原来的canvas
const cloneCanvas = cloneApp.getElementsByTagName("canvas");
Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca));

  Promise.all(promises).then(() => {  
    // this.convertImagesToBase64(cloneApp);  
    console.log(cloneApp.outerHTML);  
    const converted = htmlDocx.asBlob(\`  
  <html xmlns:o=\\'urn:schemas-microsoft-com:office:office\\' xmlns:w=\\'urn:schemas-microsoft-com:office:word\\' xmlns=\\'http://www.w3.org/TR/REC-html40\\'><head><style>  
  ${document.head.outerHTML}  
  </head>  
  <body>  
  ${cloneApp.outerHTML  
    .replaceAll(  
      "<table",  
      \`<table border-collapse="collapse" cellspacing='-1' style=" color:black;border: 1px black solid"\`  
    )  
    .replaceAll("<tr", \`<tr  style="border: 1px black solid"\`)  
    .replaceAll(  
      \`colspan="24"\`,  
      \`colspan="24"  style="padding-left:10px;width:416; white-space: pre-wrap;border: 1px black solid"\`  
    )  
    .replaceAll(  
      \`colspan="6"\`,  
      \`colspan="6"  style="padding-left:10px;width:85.75px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="4"\`,  
      \`colspan="4"  style="padding-left:10px;width:57.1px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="20"\`,  
      \`colspan="20"  style="padding-left:10px;width:285.8px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="12"\`,  
      \`colspan="12"  style="padding-left:10px;width:161.5px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="3"\`,  
      \`colspan="3"  style="padding-left:10px;width:52.8px; display: flex;justify-content: center;align-items: center;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="7"\`,  
      \`colspan="7"  style="padding-left:10px;width:100.04px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="14"\`,  
      \`colspan="14"  style="padding-left:10px;width:200.08px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )  
    .replaceAll(  
      \`colspan="28"\`,  
      \`colspan="28"  style="padding-left:10px;width:400.16px;  white-space: pre-wrap;border: 1px black solid;"\`  
    )}  
   </body>  
  </html>\`);  
    console.log(  
      cloneApp.outerHTML  
        .replaceAll(  
          "<table",  
          \`<table border-collapse="collapse" cellspacing='-1' style="border: 1px black solid"\`  
        )  
        .replaceAll("<tr", \`<tr  style="border: 1px black solid;"\`)  
        .replaceAll(  
          \`colspan="24"\`,  
          \`colspan="24"  style="width:377;  white-space: pre-wrap;border: 1px black solid"\`  
        )  
        .replaceAll(  
          \`colspan="6"\`,  
          \`colspan="6"  style="width:94px;  white-space: pre-wrap;border: 1px black solid;"\`  
        )  
        .replaceAll(  
          \`colspan="4"\`,  
          \`colspan="4"  style="width:63px;  white-space: pre-wrap;border: 1px black solid;"\`  
        )  
      // colspan="4"  
    );  
    saveAs(converted, \`${this.formData.name}能力评估报告.docx\`);  
  });  
},

这里要说一下，html-docx-js是通过识别cloneApp.outerHTML来进行转换的。我们看一下cloneApp.outerHTML是什么