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>


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/316997.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Paddle】PCA线性代数基础 + 领域应用:人脸识别算法(1.1w字超详细:附公式、代码)

【Paddle】PCA线性代数基础及领域应用 写在最前面一、PCA线性代数基础1. PCA的算法原理2. PCA的线性代数基础2.1 标准差 Standard Deviation2.2 方差 Variance2.3 协方差 Covariance2.4 协方差矩阵 The Covariance Matrix2.5 paddle代码demo①&#xff1a;计算协方差矩阵2.6 特…

【记录】Python3| 将 PDF 转换成 HTML/XML(✅⭐⭐⭐⭐pdf2htmlEX)

本文将会被汇总至 【记录】Python3&#xff5c;2024年 PDF 转 XML 或 HTML 的第三方库的使用方式、测评过程以及对比结果&#xff08;汇总&#xff09;&#xff0c;更多其他工具请访问该文章查看。 文章目录 pdf2htmlEX 使用体验与评估1 安装指南2 测试代码3 测试结果3.1 转 HT…

美国言语听力学会(ASHA)关于非处方 (OTC) 助听器的媒体声明(翻译稿)

美国国会于 2021 年 4 月 13 日批准美国听力学会积极提供建议&#xff0c;并一直积极参与制定FDA关于非处方助听器销售的拟议法规。根据2017年通过的立法授权。学院积极参与帮助塑造授权立法&#xff0c;并就即将出台的条例分享了建议。 根据美国卫生与公众服务部NIH / NIDCD的…

Flink checkpoint 源码分析- Checkpoint barrier 传递源码分析

背景 在上一篇的博客里&#xff0c;大致介绍了flink checkpoint中的触发的大体流程&#xff0c;现在介绍一下触发之后下游的算子是如何做snapshot。 上一篇的文章: Flink checkpoint 源码分析- Flink Checkpoint 触发流程分析-CSDN博客 代码分析 1. 在SubtaskCheckpointCoo…

数据挖掘之基于Lightgbm等多模型消融实验的信用欺诈检测实现

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 在当前的金融环境中&#xff0c;信用欺诈行为日益增多&#xff0c;给金融机构和消费者带来了巨大的损…

深入理解正则表达式:从入门到精通

title: 深入理解正则表达式&#xff1a;从入门到精通 date: 2024/4/30 18:37:21 updated: 2024/4/30 18:37:21 tags: 正则Python文本分析日志挖掘数据清洗模式匹配工具推荐 第一章&#xff1a;正则表达式入门 介绍正则表达式的基本概念和语法 正则表达式是一种用于描述字符串…

Rundeck(一)安装与启动

目录 自动化运维工具rundeck 它能做什么 系统环境 下载与安装 主要的目录&#xff08;RPM&#xff09; 配置与启动&#xff08;单节点&#xff09; 配置mysql mysql初始化 配置URL 启动rundeck 指定java版本 启动与开机启动 简单的配置一个nginx 代理 登录 升级 …

设计模式第二次测试 | 数据库连接池设计(原型模式、创建者模式、适配器模式)

需求中文如下&#xff1a;原本是英文&#xff0c;用百度翻译转换而来 我们需要设计一个工具&#xff0c;它负责创建一个与数据库软件MySQL的连接池。 连接池中有数百个连接可供客户端使用。 所有连接对象都有相同的内容&#xff0c;但它们是不同的对象。 连接对象的创建是资源密…

华为5700配置

恢复出厂设置&#xff0c;清空配置 1、更改名字 system-view sysname tp-10-50-01-04 2、配置管理接口 int vlan 1 ip add 10.50.1.4 255.255.254.0 quit 2、链路汇聚 interface eth-trunk 1 mode lacp quit 3、绑定端口 interface eth-trunk 1 trunkport gigabitethernet …

如何删除BigKey1

方案一 拆分为string类型 keyvalueid:0value0..........id:999999value999999 存在的问题&#xff1a; string结构底层没有太多内存优化&#xff0c;内存占用较多 想要批量获取这些数据比较麻烦 方案二 拆分为小的hash&#xff0c;将 id / 100 作为key&#xff0c; 将id …

uniApp+Vue3+vite+Element UI或者Element Plus开发学习,使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时&#xff0c;不可避免的要用到可视化的数据管理后台&#xff0c;而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。 准备工作 1&#xff0c;下载HBuilderX 开发者…

ubuntu 24.04 beta server NAT模式上网设置

在Ubuntu 24.04 Beta上设置网络通常涉及使用命令行工具。以下是设置静态IP地址和动态IP地址的步骤&#xff1a; 动态IP设置&#xff1a; 查找你的网络接口名称&#xff1a; ip a ens37是我NAT模型的一张网卡&#xff0c;此时是没有ip的。 下面介绍如何NAT模式下添加DHCP动态…

Ajax.

目录 1. 服务器相关的基础概念 1.1 服务器 1.2 客户端 1.3 服务器对外提供的资源 1.4 数据也是资源 1.5 资源与 URL 地址 1.6 什么是 Ajax 2. Ajax 的基础用法 2.1 POST 请求 2.2 GET 请求 2.3 DELETE 请求 2.4 PUT 请求 2.5 PATCH 请求 3. axios 3.1 axios 的基…

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…

Mybatis-Plus扩展接口InnerInterceptor

InnerInterceptor 接口就是 MyBatis-Plus 提供的一个拦截器接口&#xff0c;用于实现一些常用的 SQL 处理逻辑&#xff0c;处理 MyBatis-Plus 的特定功能,例如PaginationInnerInterceptor、OptimisticLockerInnerInterceptor 等,都实现了 InnerInterceptor 接口&#xff0c;并添…

2024年Docker常用操作快速查询手册

目录 一、Linux系统上 Docker安装流程&#xff08;以ubuntu为例&#xff09; 一、卸载所有冲突的软件包 二、设置Docker的apt存储库&#xff08;这里使用的是阿里云软件源&#xff09; 三、直接安装最新版本的Docker 三、安装指定版本的Docker 四、验证Docker是否安装成功…

ES集群分布式查询原理

集群分布式查询 elasticsearch的查询分成两个阶段&#xff1a; scatter phase&#xff1a;分散阶段&#xff0c;coordinating node会把请求分发到每一个分片gather phase&#xff1a;聚集阶段&#xff0c;coordinating node汇总data node的搜索结果&#xff0c;并处理为最终结…

Esp8266 - USB开关分享(开源)

文章目录 简介推广自己gitee项目地址:嘉立创项目地址&#xff1a;联系我们 功能演示视频原理图嘉立创PCB开源地址原理图PCB预览 固件烧录代码编译烧录1. 软件和驱动安装2. 代码编译1. 安装所需要的依赖库文件2. 下载源代码3. 烧录代码 使用说明1. 设备配网2. 打开设备操作页面3…

第十四届蓝桥杯国赛:2023次方的思考(指数塔,数论)

首先我们要知道&#xff0c;正常计算的话&#xff0c;指数优先级最高&#xff0c;因此得先计算指数&#xff0c;比如&#xff1a; 2 3 2 512 2^{3^2}512 232512 欧拉定理的关键在于&#xff0c;它允许我们通过减少计算的指数大小来简化模运算。 经过仔细研究&#xff08;看题…

品牌百度百科词条需要什么资料?

品牌百度百科词条是一个品牌的数字化名片&#xff0c;更是品牌历史、文化、实力的全面展现。 作为一个相当拿得出手的镀金名片&#xff0c;品牌百度百科词条创建需要什么资料&#xff0c;今天伯乐网络传媒就来给大家讲解一下。 一、品牌基本信息&#xff1a;品牌身份的明确 品…