本次的需求是手写一个养老院老人生活能力评定表,并且要能够录入信息,最终导出
表格因为有七页所以代码很多,可以不用看表格模板的详细代码。
先贴上最终效果图
填写完导出之后
基本上实现了样式的百分百还原导出
web端的表格主要实现思路就是用原生table画表格,嵌入饿了么ui和vue的条件渲染来实现编辑。
这里要记住两个属性:
rowspan:代表行跨度也就是一个单元格能够合并几行
colspan:代表列跨度,也就是一个单元格能够跨几列
贴上web表格的代码
评估编号 |
{{ assessmentId }}
|
||||||||||||||||||||||||||||
评估基准日期 |
{{ formData.createdOn.slice(0, 10) }}
|
||||||||||||||||||||||||||||
评估原因 |
{{ assessmentReason }}
|
1 接受服务前初评 | |||||||||||||||||||||||||||
2 接受服务后的常规评估 | |||||||||||||||||||||||||||||
3 状况发生变化后的即时评估 | |||||||||||||||||||||||||||||
4 因评估结果有疑问进行的复评 |
姓名 |
{{ name }}
|
||||||||||||||||||||||||||||
性别 |
{{ sex }}
|
||||||||||||||||||||||||||||
出生日期 |
{{ birthday }}
|
||||||||||||||||||||||||||||
身份证号 |
{{ idCard }}
|
||||||||||||||||||||||||||||
社保卡号 |
{{ socialSecurity }}
|
||||||||||||||||||||||||||||
民族 |
{
e.stopPropagation();
nationEdit = true;
}
"
>
{{ nation }}
|
||||||||||||||||||||||||||||
文化程度 |
{
e.stopPropagation();
educationLevelEdit = true;
}
"
>
{{ educationLevel }}
|
||||||||||||||||||||||||||||
宗教信仰 |
{
e.stopPropagation();
religiousBeliefEdit = true;
}
"
>
{{ religiousBelief }}
|
||||||||||||||||||||||||||||
婚姻状况 |
{
e.stopPropagation();
maritalStatusEdit = true;
}
"
>
{{ maritalStatus }}
|
||||||||||||||||||||||||||||
居住情况 |
{
e.stopPropagation();
residentialSituationEdit = true;
}
"
>
{{ residentialSituation }}
|
||||||||||||||||||||||||||||
医疗费用支付方式 |
{
e.stopPropagation();
medicalPaymentMethodEdit = true;
}
"
>
{{ medicalPaymentMethod }}
|
||||||||||||||||||||||||||||
经济来源 |
{
e.stopPropagation();
financialEdit = true;
}
"
>
{{ financial }}
|
||||||||||||||||||||||||||||
疾病诊断 |
{
e.stopPropagation();
diseaseDiagnosisEdit = true;
}
"
>
{{ diseaseDiagnosis.join(",") }}
|
||||||||||||||||||||||||||||
近30天内意外事件 |
{
e.stopPropagation();
accidentEdit = true;
}
"
>
{{ accident.join(",") }}
|
进食:指用餐具将食物由容器送到口中、咀嚼、吞咽等过程 |
{
e.stopPropagation();
dailyBehaviorAEdit = true;
}
"
>
{{
dailyBehaviorA === "" || dailyBehaviorA == null
? ""
: dailyBehaviorA + "分"
}}
|
10分,可独立进食(在合理的时间内独立进食准备好的食物) | ||||||||||||||||||||||||||||||||
5分,需部分帮助(进食过程中需要一定帮助,如协助把持餐具) | ||||||||||||||||||||||||||||||||||
0分,需极大帮助或完全依赖他人,或有留置胃管 | ||||||||||||||||||||||||||||||||||
洗澡 |
{
e.stopPropagation();
dailyBehaviorBEdit = true;
}
"
>
{{
dailyBehaviorB === "" || dailyBehaviorB == null
? ""
: dailyBehaviorB + "分"
}}
|
5分,准备好洗澡水后,可自己独立完成洗澡过程 | ||||||||||||||||||||||||||||||||
0分, 在洗澡过程中需他人帮助 | ||||||||||||||||||||||||||||||||||
修饰:指洗脸、刷牙、梳头等 |
{
e.stopPropagation();
dailyBehaviorCEdit = true;
}
"
>
{{
dailyBehaviorC === "" || dailyBehaviorC == null
? ""
: dailyBehaviorC + "分"
}}
|
5分, 可自己独立完成 | ||||||||||||||||||||||||||||||||
0分,需他人帮助 | ||||||||||||||||||||||||||||||||||
穿衣:指穿脱衣服、系扣、拉拉 链、穿脱鞋袜系鞋带 |
{
e.stopPropagation();
dailyBehaviorDEdit = true;
}
"
>
{{
dailyBehaviorD === "" || dailyBehaviorD == null
? ""
: dailyBehaviorD + "分"
}}
|
10分,可独立完成 | ||||||||||||||||||||||||||||||||
5分,需部分帮助(能自己穿脱,但需他人帮助整理衣物、系扣/鞋带、拉拉链) | ||||||||||||||||||||||||||||||||||
0分,需极大帮助或完全依赖他人 | ||||||||||||||||||||||||||||||||||
大便控制 |
{
e.stopPropagation();
dailyBehaviorEEdit = true;
}
"
>
{{
dailyBehaviorE === "" || dailyBehaviorE == null
? ""
: dailyBehaviorE + "分"
}}
|
10分,可控制大便 | ||||||||||||||||||||||||||||||||
{{ "5分,偶尔失控(每周 < 1次),或需要他人提示" }} | ||||||||||||||||||||||||||||||||||
0分,完全失控 | ||||||||||||||||||||||||||||||||||
小便控制 |
{
e.stopPropagation();
dailyBehaviorFEdit = true;
}
"
>
{{
dailyBehaviorF === "" || dailyBehaviorF == null
? ""
: dailyBehaviorF + "分"
}}
|
10分,可控制小便 | ||||||||||||||||||||||||||||||||
{{ "5分,偶尔失控(每天<1次,但每周>1次),或需要他人提示" }} | ||||||||||||||||||||||||||||||||||
0分,完全失控,或留置导尿管 | ||||||||||||||||||||||||||||||||||
包括去厕所、解开衣裤、擦净、 整理衣裤、冲水 |
{
e.stopPropagation();
dailyBehaviorGEdit = true;
}
"
>
{{
dailyBehaviorG === "" || dailyBehaviorG == null
? ""
: dailyBehaviorG + "分"
}}
|
10分,可独立完成 | ||||||||||||||||||||||||||||||||
{{ "5分,需部分帮助(需他人搀扶去厕所、需他人帮忙冲水或整理衣裤等)" }} | ||||||||||||||||||||||||||||||||||
0分, 需极大帮助或完全依赖他人 | ||||||||||||||||||||||||||||||||||
床椅转移 |
{
e.stopPropagation();
dailyBehaviorHEdit = true;
}
"
>
{{
dailyBehaviorH === "" || dailyBehaviorH == null
? ""
: dailyBehaviorH + "分"
}}
|
15分,可独立完成 | ||||||||||||||||||||||||||||||||
{{ "10分,需部分帮助(需他人搀扶或使用拐杖))" }} | ||||||||||||||||||||||||||||||||||
5分,需极大帮助(较大程度上依赖他人搀扶和帮助) | ||||||||||||||||||||||||||||||||||
0分,完全依赖他人 | ||||||||||||||||||||||||||||||||||
平地行走 |
{
e.stopPropagation();
dailyBehaviorIEdit = true;
}
"
>
{{
dailyBehaviorI === "" || dailyBehaviorI == null
? ""
: dailyBehaviorI + "分"
}}
|
15分,可独立在平地上行走45m | ||||||||||||||||||||||||||||||||
{{ "10分,需部分帮助(因肢体残疾、平衡能力差、过度虚弱、视力等问题, 在一定度上需他人地搀扶或使用拐杖、助行器等辅助用具)" }} | ||||||||||||||||||||||||||||||||||
5分,需极大帮助(因肢体残疾、平衡能力差、过度虚弱、视力等问题, 在较大程度上依赖他人搀扶,或坐在轮椅上自行移动) | ||||||||||||||||||||||||||||||||||
0分,完全依赖他人 | ||||||||||||||||||||||||||||||||||
上下楼梯 |
{
e.stopPropagation();
dailyBehaviorJEdit = true;
}
"
>
{{
dailyBehaviorJ === "" || dailyBehaviorJ == null
? ""
: dailyBehaviorJ + "分"
}}
|
10分,可独立上下楼梯(连续上下10-15个台阶) | ||||||||||||||||||||||||||||||||
{{ "5分,需部分帮助(需扶着楼梯、他人搀扶,或使用拐杖等)" }} | ||||||||||||||||||||||||||||||||||
0分,需极大帮助或完全依赖他人 | ||||||||||||||||||||||||||||||||||
日常生活活动总分 | {{ dailyBehaviorK + "分" }} | 上述10个项目得分之和 | ||||||||||||||||||||||||||||||||
日常生活活动分级 |
{{ dailyBehaviorL + "级" }}
|
0能力完好:总分100分 | ||||||||||||||||||||||||||||||||
{{ "1轻度受损:总分65-95分)" }} | ||||||||||||||||||||||||||||||||||
2中度受损:总分45-60分 | ||||||||||||||||||||||||||||||||||
3重度受损:总分≤40分 |
B.2. 1 认知功能 |
测验
|
“我说三样东西,请重复一遍,并记住,一会儿会问您”:苹果、手表、国旗 | ||||||||||||||||||||||||||||||||
{{ "(1)画钟测验:“请在这儿画一个圆形时钟,在时钟上标出10点45分”" }} | ||||||||||||||||||||||||||||||||||
(2)回忆词语:“现在请您告诉我,刚才我要您记住的三样东西是什么?” | ||||||||||||||||||||||||||||||||||
{
e.stopPropagation();
mentalityAEdit = true;
}
"
>
{{
mentalityA === "" || mentalityA == null
? ""
: mentalityA + "分"
}}
|
0分,画钟正确(画出一个闭锁圆,指针位置准确),且能回忆出2-3个词 | |||||||||||||||||||||||||||||||||
1分,画钟错误(画的圆不闭锁,或指针位置不准确),或只回忆出0-1个词 | ||||||||||||||||||||||||||||||||||
2分,已确诊为认知障碍,如老年痴呆-1个词 | ||||||||||||||||||||||||||||||||||
攻击行为 |
{
e.stopPropagation();
mentalityBEdit = true;
}
"
>
{{
mentalityB === "" || mentalityB == null
? ""
: mentalityB + "分"
}}
|
0分,无身体攻击行为(如打/踢/推/饺/抓/摔东西)和语言攻击行为(如骂人、语 言威胁、,尖叫) | ||||||||||||||||||||||||||||||||
{{ "1分,每月有几次身体攻击行为,或每周有几次语言攻击行为" }} | ||||||||||||||||||||||||||||||||||
2分,每周有几次身体攻击行为,或每日有语言攻击行为 | ||||||||||||||||||||||||||||||||||
抑郁症状 |
{
e.stopPropagation();
mentalityCEdit = true;
}
"
>
{{
mentalityC === "" || mentalityC == null
? ""
: mentalityC + "分"
}}
|
0分,无 | ||||||||||||||||||||||||||||||||
{{ "1分,情绪低落、不爱说话、不爱梳洗、不爱活动" }} | ||||||||||||||||||||||||||||||||||
2分,有自杀念头或自杀行为 | ||||||||||||||||||||||||||||||||||
精神状态总分 | {{ mentalityD + "分" }} | 上述3个项目得分之和 | ||||||||||||||||||||||||||||||||
精神状态分级 |
{{ mentalityE + "级" }}
|
0能力完好:总分为0分 | ||||||||||||||||||||||||||||||||
{{ "1轻度受损:总分为1分)" }} | ||||||||||||||||||||||||||||||||||
2中度受损:总分2-3分 | ||||||||||||||||||||||||||||||||||
3重度受损:总分4-6分 |
意识水平 |
{
e.stopPropagation();
perceptionCommunicationAEdit = true;
}
"
>
{{
perceptionCommunicationA === "" ||
perceptionCommunicationA == null
? ""
: perceptionCommunicationA + "分"
}}
|
0分,神志清醒,对周围环境警觉 | ||||||||||||||||||||||||||||||||
{{ "1分,嗜睡,表现为睡眠状态过度延长。当呼唤或推动患者的肢体时可唤醒,并能进行正确的交谈或执行指令,停止刺激后又继续入睡" }} | ||||||||||||||||||||||||||||||||||
2分,昏睡,一般的外界刺激不能使其觉醒,给予较强烈的刺激时可有短时的意识清醒,醒后可简短回答提问,当刺激减弱后又很快进入睡眠状态 | ||||||||||||||||||||||||||||||||||
3分,昏迷,处于浅昏迷时对疼痛刺激有回避和痛苦表情:处于深昏迷时对刺激无反应《若评定为昏迷,直接评定为重度失能,可不进行以下项目的评估) | ||||||||||||||||||||||||||||||||||
视力: 若平日带老花镜或近视镜,应在佩戴眼镜的情况下评估 |
{
e.stopPropagation();
perceptionCommunicationBEdit = true;
}
"
>
{{
perceptionCommunicationB === "" ||
perceptionCommunicationB == null
? ""
: perceptionCommunicationB + "分"
}}
|
0分,能看清书报上的标准字体 | ||||||||||||||||||||||||||||||||
{{ "1分,能看清楚大字体,但看不清书报上的标准字体" }} | ||||||||||||||||||||||||||||||||||
2分,视力有限,看不清报纸大标题,但能辨认物体 | ||||||||||||||||||||||||||||||||||
3分,辨认物体有困难,但眼睛能跟随物体移动,只能看到光、颜色和形状 | ||||||||||||||||||||||||||||||||||
4分,没有视力,眼睛不能跟随物体移动 | ||||||||||||||||||||||||||||||||||
听力: 若平时佩戴助听器,应在佩戴助听器的情况下评估 |
{
e.stopPropagation();
perceptionCommunicationCEdit = true;
}
"
>
{{
perceptionCommunicationC === "" ||
perceptionCommunicationC == null
? ""
: perceptionCommunicationC + "分"
}}
|
0分,可正常交谈,能听到电视、电话、门铃的声音 | ||||||||||||||||||||||||||||||||
{{ "1分,在轻声说话或说话距离超过2米时听不清" }} | ||||||||||||||||||||||||||||||||||
2分,正常交流有些困难,需在安静的环静或大声说话才能听到 | ||||||||||||||||||||||||||||||||||
3分,讲话者大声说话或说话很慢,才能部分听见 | ||||||||||||||||||||||||||||||||||
4分,完全听不见 | ||||||||||||||||||||||||||||||||||
沟通交流: 包括非语言沟通 |
{
e.stopPropagation();
perceptionCommunicationDEdit = true;
}
"
>
{{
perceptionCommunicationD === "" ||
perceptionCommunicationD == null
? ""
: perceptionCommunicationD + "分"
}}
|
0分,无困难,能与他人正常沟通和交流 | ||||||||||||||||||||||||||||||||
{{ "1分,能够表达自己的需要及理解别人的话,但需要增加时间或给予帮助" }} | ||||||||||||||||||||||||||||||||||
2分,表达需要或理解有困难,需频繁重复或简化□头表达 | ||||||||||||||||||||||||||||||||||
3分,不能表达需要或理解他人的话 | ||||||||||||||||||||||||||||||||||
感知觉与沟通分级 |
{{ perceptionCommunicationE + "级" }}
|
0 能力完好:意识清醒,且视力和听力评为0或1,沟通评为0 | ||||||||||||||||||||||||||||||||
1 轻度受损:意识清醒,但视力或听力中至少一项评为2,或沟通评为1 | ||||||||||||||||||||||||||||||||||
2 中度受损:意识清醒,但视力或听力中至少一项评为3,或沟通评为2,或嗜睡,视力或听力评定为3及以下,沟通评定为2及以下 | ||||||||||||||||||||||||||||||||||
3 重度受损:意识清醒或嗜睡,但视力或听力中至少一项评为4,或沟通评为3;或昏睡/昏迷 |
生活能力 |
{
e.stopPropagation();
socialParticipationAEdit = true;
}
"
>
{{
socialParticipationA === "" ||
socialParticipationA == null
? ""
: socialParticipationA + "分"
}}
|
0分,除个人生活自理外(如饮食、洗漱、穿戴、二便),能料理家务(如做饭、洗衣)或当家管理事务 | ||||||||||||||||||||||||||||||||
{{ "1分,除个人生活自理外,能做家务,但欠好,家庭事务安排欠条理" }} | ||||||||||||||||||||||||||||||||||
2分,个人生活能自理,只有在他人帮助下才能做些家务,但质量不好 | ||||||||||||||||||||||||||||||||||
3分,个人基本生活事务能自理(如饮食、二便),在督促下可洗漱 | ||||||||||||||||||||||||||||||||||
4分,个人基本生活事务能自理(如饮食、二便),在督促下可洗漱 | ||||||||||||||||||||||||||||||||||
工作能力 |
{
e.stopPropagation();
socialParticipationBEdit = true;
}
"
>
{{
socialParticipationB === "" ||
socialParticipationB == null
? ""
: socialParticipationB + "分"
}}
|
0分,原来熟练的脑力工作或体力技巧性工作可照常进行 | ||||||||||||||||||||||||||||||||
{{ "1分,原来熟练的脑力工作或体力技巧性工作能力有所下降" }} | ||||||||||||||||||||||||||||||||||
2分,原来熟练的脑力工作或体力技巧性工作明显不如以往,部分遗忘 | ||||||||||||||||||||||||||||||||||
3分:对熟练工作只有一些片段保留,技能全部遗忘 | ||||||||||||||||||||||||||||||||||
4分,对以往的知识或技能全部磨灭 | ||||||||||||||||||||||||||||||||||
时间/空间定向 |
{
e.stopPropagation();
socialParticipationCEdit = true;
}
"
>
{{
socialParticipationC === "" ||
socialParticipationC == null
? ""
: socialParticipationC + "分"
}}
|
0分、时间观念(年、月、日、时)清楚;可单独出远门,能很快掌握新环境的方位 | ||||||||||||||||||||||||||||||||
{{ "1分,时间观念有些下降,年、月、日清楚,但有时相差几天;可单独来往于近街,知道现住地的名称和方位,但不知回家路线" }} | ||||||||||||||||||||||||||||||||||
2分,时间观念较差,年、月、日不清楚,可知上半年或下半年;只能单独在家附近行动,对现住地只知名称,不知道方位 | ||||||||||||||||||||||||||||||||||
3分,时间观念很差,年、月、日不清楚,可知上午或下午;只能在左邻右舍间串门,对现住地不知名称和方位 | ||||||||||||||||||||||||||||||||||
4分,无时间观念;不能单独外出 | ||||||||||||||||||||||||||||||||||
人物定向 |
{
e.stopPropagation();
socialParticipationDEdit = true;
}
"
>
{{
socialParticipationD === "" ||
socialParticipationD == null
? ""
: socialParticipationD + "分"
}}
|
0分,知道周围人们的关系,知道祖孙、叔俯、姑姨、侄子侄女等称谓的意义;可分辨陌生人的 大致年龄和身份,可用适当称呼 | ||||||||||||||||||||||||||||||||
{{ "1分,只知家中亲密近亲的关系,不会分辨陌生人的大致年龄,不能称呼陌生人" }} | ||||||||||||||||||||||||||||||||||
2分,只能称呼家中人,或只能照样称呼,不知其关系,不辨辈分 | ||||||||||||||||||||||||||||||||||
3分,只认识常同住的亲人,可称呼子女或孙子女,可辨熟人和生人 | ||||||||||||||||||||||||||||||||||
4分,只认识保护人,不辨熟人和生人 | ||||||||||||||||||||||||||||||||||
社会交往能力 |
{
e.stopPropagation();
socialParticipationEEdit = true;
}
"
>
{{
socialParticipationE === "" ||
socialParticipationE == null
? ""
: socialParticipationE + "分"
}}
|
0分,参与社会,在社会环境有一定的适应能力,待人接物恰当 | ||||||||||||||||||||||||||||||||
{{ "1分,能适应单纯环境,主动接触人,初见面时难让人发现智力问题,不能理解隐喻语" }} | ||||||||||||||||||||||||||||||||||
2分,脱离社会,可被动接触,不会主动待人,谈话中很多不适词句,容易上当受骗 | ||||||||||||||||||||||||||||||||||
3分,勉强可与人交往,谈吐内容不清楚,表情不恰当 | ||||||||||||||||||||||||||||||||||
4 分,难以与人接触 | ||||||||||||||||||||||||||||||||||
社会参与总分 | {{ socialParticipationF + "分" }} | 上述5个项目得分之和 | ||||||||||||||||||||||||||||||||
社会参与分级 |
{{ socialParticipationG + "级" }}
|
0能力完好:总分0-2分 | ||||||||||||||||||||||||||||||||
1 轻度受损:总分3-7分 | ||||||||||||||||||||||||||||||||||
2 中度受损:总分8-13分 | ||||||||||||||||||||||||||||||||||
3 重度受损:总分14-20分 |
生活能力 |
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中各情况对最终等级的影响,等级不再提高 | ||||||||||||||||||||||||||||||||||
老年人能力初步等级 |
{{ preliminaryLevel }}
|
|||||||||||||||||||||||||||||||||
老年人能力最终等级 |
{
e.stopPropagation();
finalLevelEdit = true;
}
"
>
{{ finalLevel }}
|
|||||||||||||||||||||||||||||||||
评估员签名 |
{{ assessorSignature }}
|
|||||||||||||||||||||||||||||||||
信息提供者签名 |
{{ providerSignature }}
|
控制编辑的基本思路就是加上一个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是什么
实际上就是咱们渲染的html代码,这就说明咱们实际上可以通过修改cloneApp.outerHTML来控制导出的word的一些样式。
但是要注意html-docx-js只能通过行内样式来控制word的样式
所以要用replaceAll这个方法来进行替换,写上需要定制的样式。这里我不能直接在模版代码中写行内样式,因为会影响web端的展示。
我在导出的代码中对样式定制的代码进行了标红。如果需要修改可以看看根据自己的需求来更改。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章