解决打印页面el |
您所在的位置：网站首页 › 邮件表格大太宽打印不全 › 解决打印页面el |
解决打印页面el
|
起因：
做打印页面功能，页面中有el-table元素，发现弹出来的打印页面，只打印了几个table列，还有好几个列没打印。
1、首先我调整el-table-column width=“300” 的width为很小，结果效果很丑。而且效果不好。 2、（成功方法）用其他打印插件、使用了这两个插件 import html2canvas from ‘html2canvas’; import printJs from ‘print-js’; 在使用这两个插件的基础下，还得 用原生的table代替了el-table才实现不同分辨率屏幕下都可以打印的全el-table，不缺失列的效果。 实现原因：使用了 printJs转图片打印，所以打印table都显示全了，没有出现缺失的情况。 上代码： nb打印 printJs打印 名称1 地点2 时间3 武汉4 北京5 上海6 广州7 深圳8 杭州9 香港10 名称11 成都12 {{item.name1}} {{item.name2}} {{item.name3}} {{item.name4}} {{item.name5}} {{item.name6}} {{item.name7}} {{item.name8}} {{item.name9}} {{item.name10}} {{item.name11}} {{item.name12}} 暂无数据 import html2canvas from 'html2canvas'; import printJs from 'print-js'; export default { name: "", data() { return { list: [], printObj:{ id:"printId", popTitle:" ", extraHead: ', #printId { width: 100%; !important; } ' }, nameList: ["香蕉","苹果","梨子","葡萄","哈密瓜","车厘子","草莓","榴莲","石榴","黄瓜","圣女果"] }; }, mounted() { const len = Math.ceil(Math.random()*20); for (let i = 0; i name1: this.createName(i), name2: this.createName(i), name3: this.createName(i), name4: this.createName(i), name5: this.createName(i), name6: this.createName(i), name7: this.createName(i), name8: this.createName(i), name9: this.createName(i), name10: this.createName(i), name11: this.createName(i) + "我很长" + new Date().getTime(), name12: this.createName(i) }); } }, methods: { createName(index){ const name = this.nameList[Math.ceil(Math.random()*10)]; return name + index + Math.ceil(Math.random()*100); }, // printJs转图片打印 onPrint() { const printContent = this.$refs.printId; // 获取dom 宽度 高度 const width = printContent.clientWidth; const height = printContent.clientHeight; // 创建一个canvas节点 const canvas = document.createElement('canvas'); const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。 canvas.width = width * scale; // 定义canvas 宽度 * 缩放 canvas.height = height * scale; // 定义canvas高度 *缩放 canvas.style.width = width * scale + 'px'; canvas.style.height = height * scale + 'px'; canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度 const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度 html2canvas(printContent, { canvas, backgroundColor: null, useCORS: true, windowHeight: document.body.scrollHeight, scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全 scrollY: -scrollTop }).then((canvas) => { const url = canvas.toDataURL('image/png') printJS({ printable: url, type: 'image', documentTitle: '', // 标题 style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚 }) }).catch(err=>{ console.error(err); }) } } }; table { font-family: Arial, sans-serif; font-size: 14px; background-color: #f0f2f5; border-collapse: collapse; color: #454545; table-layout: auto; width: 100%; text-align: center; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #dadcde; thead { border-top-width: 1px; border-top-style: solid; border-top-color: #dadcde; line-height: 40px; font-weight: bold; color: #454c70; } tr { border-top-width: 1px; border-top-style: solid; border-top-color: #dadcde; line-height: 23px; } td{ padding: 5px 10px; font-size: 14px; font-family: Verdana; width: 100px; word-break: break-all; // 元素换行 } // 斑马纹效果stripe tr:nth-child(even) { background: #F5F7F9; } tr:nth-child(odd) { background: #FFF; } } .table-empty { min-height: 60px; text-align: center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #ebeef5; .table-empty-text { line-height: 60px; width: 50%; color: #909399; } } 插件下载npm install --save print-js npm install --save html2canvas 转载：https://www.cnblogs.com/scallop/p/14184580.html 由于公司项目涉及保密xxx，所以图片什么的不展示。这个方法实现是可以解决table显示不全的问题，但是并没有真正的解决el-table打印显示不全的问题，因为以上方法还是用了原生table替代了el-table才得以解决问题，所以要是有人有办法真正实现，直接打印el-table可以打印全，那么可以评论一下，互相交流学习一下。 |
然后看代码，用到的方法是： window.print();并不是这个方法错了，百度上说是el-table的宽度什么的，是有些bug的。目前还不知道具体bug在哪里。【本文地址】
今日新闻 |
推荐新闻 |