html表格导出为word文档,导出的部分表格内无法填写文字

导出技术实现:fileSaver.js+html-docx-js

1.npm安装
npm install --save html-docx-js
npm install --save file-saver
2.页面引入
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';


components: {
    htmlDocx,
    saverFile,
},
3.页面布局
先在页面使用html绘出表格样式
<div id='exportId'>
   <table  border="1" cellspacing="0" style="font: 16px SimSun;table-layout: fixed;width:100%;">
    <tr align="center">
        <td valign="middle" style="height:55px;font: 16px SimHei">名字</td>
        <td valign="middle" style="padding-left:5px;" align="left">
          {{inscriber}}
        </td>
        <td style="height:55px;font: 16px SimHei" valign="middle">出生日期</td>
        <td style="padding-left:5px;" align="left" valign="middle">
          {{inscriber}}
        </td>
    </tr>
    <tr align="center">
        <td style="height:55px;font: 16px SimHei" valign="middle">部门</td>
        <td  align="left" valign="middle" style="padding-left:5px">
          {{inscriber}}
        </td>
        <td valign="middle" style="font: 16px SimHei">考核结果</td>
        <td valign="middle" align="left" style="padding-left:5px">
        </td>
    </tr>
    <tr>
        <td align="center" style="height:200px">
            <div style="font: 16px SimHei">部门领导</div>
            <div style="font: 16px SimHei">意见</div>
        </td>
        <td valign="bottom" colspan="3" style="height:200px;">
            <p></p>
            <p style="padding-left:100px">&nbsp;&nbsp;组长:&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门领导:&nbsp;&nbsp;
            </p>
            <p style="text-align:right">
                年&nbsp;&nbsp;月&nbsp;&nbsp;日&nbsp;&nbsp;
            </p>
        </td>
    </tr>
  </table>
</div>
复制代码
在页面可以看到效果
4.导出word
exportWord(){
      let htmls = document.getElementById('exportId') //获取需要导出的标签
      this.allDomObj = htmls.cloneNode(true)
      this.exec(this.allDomObj.innerHTML.toString()) // 导出的方法
}
exec(htmls) {
      let page =
        `<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
          <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <body>
          <div style="text-align:center;margin:0;padding:0;margin-bootom:10px"><p style="font: 29.3px Simsun;">` +
          '考核表'+
        `</p></div>
          <div id="app"> ` +
        htmls +
        ` </div>
        </body>
    </html>
    `
    console.log('page', page)
    let converted = htmlDocx.asBlob(page)
    saverFile(converted, this.title2 + '.docx')
},
导出的word如下,样式没问题,但是红色区域写不了字


5.解决

把部门领导意见部分页面布局修改一下,红色部分使用一个td布局,左侧使用合并行,同时把边框变为白色,就能写字了

    <tr>
        <td align="center" rowSpan="2" style="height:200px">
            <div style="font: 16px SimHei">部门领导</div>
            <div style="font: 16px SimHei">意见</div>
        </td>
        <td colspan="3"  style="border-bottom:1px dotted #fff;height:150px" >
          <p></p>
        </td>
    </tr>
    <tr>
        <td valign="bottom" colspan="3" style="border-top:1px dotted #fff;">
            <p></p>
            <p style="padding-left:100px">&nbsp;&nbsp;组长:&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门领导:&nbsp;&nbsp;
            </p>
            <p style="text-align:right">
                年&nbsp;&nbsp;月&nbsp;&nbsp;日&nbsp;&nbsp;
            </p>
        </td>
    </tr>
相关推荐
匆匆整棹还2 小时前
已有账号,重装系统激活office后发现没有ppt,word,excel等
word·powerpoint·excel
ChinaLzw3 小时前
遇到Word打不开,WPS可以打开的解决办法
word
小森( ﹡ˆoˆ﹡ )9 小时前
词嵌入方法(Word Embedding)
人工智能·机器学习·自然语言处理·nlp·word·embedding
LKID体2 天前
win32com库基于wps对Word文档的基础操作
c#·word·wps
北笙··2 天前
解决”重复文件名重命名“问题【根据Word系统方式】
java·word
wqqqianqian3 天前
国产linux系统(银河麒麟,统信uos)使用 PageOffice 实现word文件在线留痕
word·在线·uos·国产·银河麒麟·pageoffice·痕迹
hairenjing11235 天前
如何利用内部开源加速创新
人工智能·windows·stm32·macos·开源·word
淮北枳丶5 天前
Apache POI 操作Word常用方法
java·word·apache
玻璃珠5 天前
关于word 页眉页脚的一些小问题
word
遇见小美好y5 天前
页面上的内容的生成图片后,保存为word,并下载
前端·word