当前位置: 首页 > news >正文

实现el-table打印功能,样式对齐,去除滚动条

实现el-table打印功能,样式对齐,去除滚动条

// 整个页面打印
function printTable(id) {// let domId = '#js_index'// if (id) {//   domId = `#${ id }`;// }// let wpt = document.querySelector(domId);// let newContent = wpt.innerHTML;// let oldContent = document.body.innerHTML;// document.body.innerHTML = newContent;// window.print(); //打印方法// history.go(0);// document.body.innerHTML = oldContent;if (id) {// 获取打印DOMlet el = document.getElementById(id);// 当前页面样式let headDom = document.getElementsByTagName("head")[0];// 创建iframelet iframe = document.createElement("iframe");// 设置iframe样式iframe.setAttribute("id", id);iframe.setAttribute("style","position:absolute;width:0px;height:0px;left:-500px;top:-500px;");// 在页面插入iframedocument.body.appendChild(iframe);// 获取iframe内的htmllet doc = iframe.contentWindow.document;// 经需要打印的DOM插入iframelet printMain = document.createElement("div");printMain.setAttribute("id", id);printMain.innerHTML = el.innerHTML;doc.body.appendChild(printMain);// 设置iframe内的header,添加样式文件setTimeout(() => {doc.getElementsByTagName("head")[0].innerHTML = headDom.innerHTML;const table = doc.querySelectorAll('.el-table__header,.el-table__body');const table1 = doc.querySelectorAll('.el-table');const table2 = doc.querySelectorAll('.el-table__body-wrapper');for (let i = 0; i < table2.length; i++) {const tableItem = table2[i];console.log(tableItem);tableItem.style.maxHeight = 'unset';}for (let i = 0; i < table1.length; i++) {const tableItem = table1[i];console.log(tableItem);tableItem.style.maxHeight = 'unset';}setTimeout(() => {//el-table 打印不全的问题for (let i = 0; i < table.length; i++) {const tableItem = table[i];console.log(table1);tableItem.style.width = '100%';const child = tableItem.childNodes;for (let j = 0; j < child.length; j++) {const element = child[j];if (element.localName == 'colgroup') {element.innerHTML = '';}}}setTimeout(function () {iframe.contentWindow.focus();iframe.contentWindow.print();// 关闭iframedoc.close();document.body.removeChild(iframe);}, 1000);}, 1000)}, 0)} else {window.print(); //打印方法}
}
http://www.lryc.cn/news/206453.html

相关文章:

  • 2022年09月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • 【面试经典150 | 链表】两数相加
  • vue路径中“@/“代表什么
  • java springboot2.7 写一个本地 pdf 预览的接口
  • RustDay06------Exercise[81-90]
  • 【Docker从入门到入土 6】Consul详解+Docker https安全认证(附证书申请方式)
  • PCIe架构的处理器系统介绍
  • 国产内存强势崛起,光威龙武挑战D5内存24×2新标杆
  • 矩阵的运算
  • Android 获取SIM卡号码权限申请
  • Linux CentOS 本地yum配置
  • 【c++速通】入门级攻略:什么是内联函数?函数重载又是什么?
  • ubuntu 安装串口工具和添加虚拟串口
  • 【数据结构】数组和字符串(四):特殊矩阵的压缩存储:稀疏矩阵——三元组表
  • 为什么POST请求经常发送两次?
  • 打破总分行数据协作壁垒,DataOps在头部股份制银行的实践|案例研究
  • 测试用例的设计方法(全):边界值分析方法
  • 酷开科技 | 酷开系统沉浸式大屏游戏更解压!
  • 读高性能MySQL(第4版)笔记20_Performance Schema和其他
  • spring cloud Eureka集群模式搭建(IDEA中运行)《二》
  • 大模型(LLM)在电商推荐系统的探索与实践
  • C语言之指针详解
  • 【Java笔记+踩坑】设计模式——原型模式
  • Flutter GetX使用详解
  • 【ARM Coresight 系列文章 3.3 - ARM Coresight SWD 协议详细介绍】
  • 作为开发者,可视化开发工具了解一下
  • Python:实现日历功能
  • 2.9.C++项目:网络版五子棋对战之业务处理模块的设计
  • springboot actuator 常用接口
  • 知识点滴 - Email地址不区分大小写