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