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

智能中医项目中的打印报告要新增一项异常检测表格的显示,纸张定为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 = '';
        }
    }
}

最终解决完此问题。

posted @ 2022-10-19 09:23  我在吃大西瓜呢  阅读(419)  评论(0编辑  收藏  举报