首页 > 其他分享 >解决Vue打印el-table不完全的pdf问题

解决Vue打印el-table不完全的pdf问题

时间:2022-10-19 09:35:02浏览次数:99  
标签:el Vue const 打印 k5 pdf table

智能中医项目中的打印报告要新增一项异常检测表格的显示,纸张定为A4纸张竖向打印,在使用el-table后发现,虽然页面中显示无误,但不管怎么样设置table的宽度,打印的pdf中最后一列总会缺失,查阅资料是已存有的bug

为了解决这个问题,查阅了很多资料,最终还是需要在print.js中修改

修改src/plugin/print.js文件:(我在原基础上新加的,有需要可以看一下之前完善echarts的代码,解决Vue打印带有echarts的pdf问题

const tableNode = document.querySelectorAll('.el-table__header,.el-table__body');
//el-table 打印不全的问题
for(let k5 = 0 ; k5 < tableNode.length ; k5++){
	const tableItem = tableNode[k5] ;
	tableItem.style.width = '100%';
	const  child = tableItem.childNodes;
    for (let i = 0; i < child.length; i++) {
		const  element = child[i];
        if(element.localName === 'colgroup'){
        	element.innerHTML = '';
        }
    }
}

最终解决完此问题。

标签:el,Vue,const,打印,k5,pdf,table
From: https://www.cnblogs.com/wangzheming35/p/16805058.html

相关文章

  • vue中页面调用多次组件,会出现组件之间相互影响
    这个大部分发生在echarts和地图中,我们为了节省性能把echarts和map对象没有绑定在vue对象上导致,一个页面多次调用时会出现问题,解决办法:如果确定一个页面调用多次了,就把echa......
  • Entity Framework教程-增删改查(Data Create、Delete、Update、Select)
    更新记录转载请注明出处:2022年10月19日发布。2022年10月10日从笔记迁移到博客。增删改查增删改说明对实体进行增删改操作,会改变实体的EntityState属性插入(Inse......
  • xshell链接vmvare
    xshell链接vmvare安全终端模拟软件Xshell 是一个强大的安全终端模拟软件,它支持SSH1,SSH2,以及MicrosoftWindows平台的TELNET协议。Xshell通过互联网到远程主机......
  • RuoYi-Vue切换达梦数据库(一)
    一、达梦数据库安装这里使用的达梦8开发版 ,安装过程没什么且包内有说明文档。要注意的点是创建数据库实例时,记得取消勾选字符串比较大小写敏感。二、达梦数据库用户设......
  • RuoYi-Vue切换达梦数据库(二)
    一、JDBC依赖代码部分适配 RuoYi-Vuev3.8.4前后端分离版1、修改admin模块下的pom.xml文件Maven仓库中存在,直接替换注意jdbc包的版本:Dm7JdbcDriver18中7是DM数据库的......
  • vue3+vite+ts自动引入api和组件
    安装cnpminstallunplugin-auto-importunplugin-vue-components-d配置//自动导入compositionapi和生成全局typescript说明importAutoImportfrom'unplugin-au......
  • 【WPF】System.ComponentModel.DataAnnotations
    System.ComponentModel.DataAnnotations官方的描述是 命名空间提供定义ASP.NETMVC和ASP.NET数据控件的类的特性。这个是我们在网站开发时经常遇到的。在实际使用中......
  • Java I/O(2):NIO中的Channel
    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来~   为了解决标准JavaI/O令人难以忍受的效率问题,从JDK1.4开始,NIO出现了(Non-blockingI/O,官方称之为NewI/O)。NIO不但......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCString()。并在模板......
  • Selenium+Python系列 - 开发环境搭建
    一、写在前面我从未想过自己会写python系列的自动化文章,有些同学会问,那你现在为什么又开始写了?不止一个人找过我,问我可以写一些Python自动化的文章吗,答案是肯定的。笔......