使用vue-print-nb打印element table时表格打印不全的问题

elment的表格设置宽度为100%之后打印还是不能将表格打印完整如下图

1.寻找问题

为什么会出现这种情况，打开控制台查看代码

原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1388px肯定与打印纸的宽度不一致所以导致部分区域打印不出来

2.解决思路那就把col这里的具体宽度设置成百分比就OK了。

2.1首先看能不能从element 着手，但是element 的table有设置Table-column Attributes 的width属性但是是px不是百分百。

2.2既然element不行那就从vue-print-nb 着手，首先我们要清楚print的原理其实就是将我们要打印的id包裹的内容（其实是生成图片）放到一个iframe 然后再打印。那我们就走打印之前修改这些table>colgroup>col 属性的width 。来看看他的钩子回调函数

结果是这些函数的回调都是在插入 iframe后才调用。都已经走到这里了放弃是不可能的了，怎么办呢，那就看我们的第三步

3.修改源码。

首先我们要写一些样式覆盖原来的table的宽度样式确保宽度不是一个具体的px

#printData {::v-deep .el-table {margin-top: 10px;table{width: 100%!important;}.el-table__body,.el-table__header {width: 100% !important;}.el-table__body {width: 100% !important;}}}

我们进入vue-print-nb的目录

我们在main.js 中

import Print from 'vue-print-nb'

其实是用的lib下的文件断点调试的时候跳进的是这个文件

这个是压缩过的文件要修改当然有一定难度我们退而求其次，修改print文件夹下的文件

主要就是print.js 和printarea.js 文件

其实也不用一行一行的研究代码，首先我们从钩子函数开始入手，随便复制一个钩子函数的名字进行搜索（比如复制beforeOpenCallback ）

所以的钩子函数都在这里那我们按照他的样式添加一个钩子函数（beforeEntryIframe函数）

 new Print({ids: id, // * 局部打印必传入idvue,url: binding.value.url, // 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高standard: '', // 文档类型，默认是html5，可选 html5，loose，strictextraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题zIndex: binding.value.zIndex || 20002, // 预览窗口的z-indexpreviewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题popTitle: binding.value.popTitle, // title的标题preview: binding.value.preview || false, // 是否启动预览模式asyncUrl: binding.value.asyncUrl,beforeEntryIframe(){binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)},previewBeforeOpenCallback () { // 预览窗口打开之前的callbackbinding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)},previewOpenCallback () { // 预览窗口打开之后的callbackbinding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)},openCallback () { // 调用打印之后的回调事件binding.value.openCallback && binding.value.openCallback(vue)},closeCallback () {binding.value.closeCallback && binding.value.closeCallback(vue)},beforeOpenCallback () {binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)}});

printarea.js文件中会有调用这里的定义的回调函数，我们像中ifram插入内容之前修改，那就要走插入之前执行我们新加的钩子函数。

printarea.js 文件一进来我们看到了一个init方法，在这里面打开预览前面有一个写入内容。这就很重要了一定是要在写入内容前操作表格。果断进入这个write方法，

这里我们应该是要操组ifram body内的内容所以进入这里的getbody()方法

 getBody () {let ids = this.settings.ids;ids = ids.replace(new RegExp("#", "g"), '');this.settings.beforeEntryIframe();this.elsdom = this.beforeHanler(document.getElementById(ids));let ele = this.getFormData(this.elsdom);let htm = ele.outerHTML;return '<body>' + htm + '</body>';}

我们在这个方法中执行我们之前写的beforeEntryIframe钩子函数

当然最重要的是我们要去处理这个表格中的宽度未百分比的这个beforeEntryIframe 方法的具体实现

print: {id: 'printData',popTitle: '打印', // 打印配置页上方标题extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）previewTitle: '', // 打印预览的标题（开启预览模式后出现）,previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）beforeEntryIframe() {const widthArr = ['25%', '10%', '15%', '50%'];const tables = document.getElementById('tablediv7').getElementsByTagName('table'); //获取打印的表格const headcolgroupCol = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col');const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col');widthArr.forEach((val, index) => {headcolgroupCol[index].width = val;headcolgroupCol1[index].width = val;})},openCallback() {}, // 调用打印之后的回调事件closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）url: '',standard: '',extraCss: '',loading: false,
},

来看看效果

结束！！！

特别注意，这里改为vue-print-nb 文件之后要把包中print文件复制出来然后在main.js修改路径为复制之后的地址这样确保我们引用的是自己修改的文件并且防止被人npm install 之后引用的还是官方的未改的包同时可以npm unintall vue-print-nb 删除这个包了

使用vue-print-nb打印element table时表格打印不全的问题相关推荐

Vue -print - nb 打印插件使用详解以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
python笔记 print+‘\r‘ （打印新内容时删除打印的旧内容）
\r 表示将光标的位置回退到本行的开头位置配合end=''不换行,实现打印新内容时删除旧内容 1 倒计时举例 1.1 '\r'+end='' import time for i in range(1 ...
同一字段降序个升序_5个打印小技巧，表格打印没烦恼
Excel表格打印设置有很多,这里罗列最常见.最实用的五个技巧分享给大家. 打印区域调整日常打印中会出现下面这种情况,要打印A-F列,预览时发现少了一列: 回到Excel界面,点击底部的" ...
excel不显示0_如何解决EXCEL打印预览时总显示不全或不在一张纸上的问题？
一.[温习] 以前有条友问过打印时打出来的东西不在一张纸上或是显示有内容却打印不出来,那是因为有打印区域的问题,如图取消掉打印区域即可,或者直接在打印缩放里如图设置即可. 二.[问题] 今天又有条友 ...
element——table使用表格形式给员工排班
功能清单给每个老人在某个月排班点击日期选中取消服务对象和员工列做筛选当月天数动态服务次数根据选中个数动态生成,使用深度监听每个单元格点击事件改变源数据 <template>&l ...
vue-print-nb element 打印table时不全的问题
先来看看页面上的table 再来看看浏览器打印预览的样子很明显我的table缺了一大半. 我尝试过设定table的宽度比例等等一系列的方法,包括改用print-js都无法解决我的问题. 最后的解决办 ...
lodop打印不显示页码_打印成了最浪费时间的事？5个EXCEL打印技巧让你不在抗拒打印...
打印是职场必会的操作,然而很多小伙伴都在EXCEL的打印上遇到大大小小的问题.今天就分享几个EXCEL打印技巧,让你的打印问题一扫而光! 打印标题在打印时通常只有第一页有标题,我们可以通过设置让多页 ...
table表格打印断页时自动分页的实现方法
table表格打印自动分页的实现思路主要是要用到 thead 标签或者 tfoot 标签实现自动分页利用 css样式和 th 标签占位的方法解决自动分页后每页底部会出现一条横线的问题利用page ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...

使用vue-print-nb打印element table时表格打印不全的问题

使用vue-print-nb打印element table时表格打印不全的问题相关推荐

最新文章

热门文章