android系统定制开发使用vue-print-nb打印element table时表格打印不全的问题

elmentandroid系统定制开发的表格设置宽度为100%android系统定制开发之后打印还是不能将表android系统定制开发格打印完整 如下图

 

1.寻找问题

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

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

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

3.修改源码。

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

  1. #printData {
  2. 		 ::v-deep .el-table {
  3. 			margin-top: 10px;
  4. 			table{
  5. 				width: 100%!important;
  6. 			}
  7. 			.el-table__body,
  8. 			.el-table__header {
  9. 				width: 100% !important;
  10. 			}
  11.  
  12. 			.el-table__body {
  13. 				width: 100% !important;
  14. 			}
  15.  
  16. 			
  17. 		}
  18. 	}

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

 我们在main.js 中

import Print from 'vue-print-nb'

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

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

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

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

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

  1.  new Print({
  2.         ids: id, // * 局部打印必传入id
  3.         vue,
  4.         url: binding.value.url, // 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高
  5.         standard: '', // 文档类型，默认是html5，可选 html5，loose，strict
  6.         extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
  7.         extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开
  8.         previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
  9.         zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
  10.         previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
  11.         popTitle: binding.value.popTitle, // title的标题
  12.         preview: binding.value.preview || false, // 是否启动预览模式
  13.         asyncUrl: binding.value.asyncUrl,
  14.         beforeEntryIframe(){
  15.            binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)
  16.         },
  17.         previewBeforeOpenCallback () { // 预览窗口打开之前的callback
  18.           binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
  19.         },
  20.         previewOpenCallback () { // 预览窗口打开之后的callback
  21.           binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
  22.         },
  23.         openCallback () { // 调用打印之后的回调事件
  24.           binding.value.openCallback && binding.value.openCallback(vue)
  25.         },
  26.         closeCallback () {
  27.           binding.value.closeCallback && binding.value.closeCallback(vue)
  28.         },
  29.         beforeOpenCallback () {
  30.           binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
  31.         }
  32.       });

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

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

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

  1.  getBody () {
  2.     let ids = this.settings.ids;
  3.     ids = ids.replace(new RegExp("#", "g"), '');
  4.     this.settings.beforeEntryIframe();
  5.     this.elsdom = this.beforeHanler(document.getElementById(ids));
  6.     let ele = this.getFormData(this.elsdom);
  7.     let htm = ele.outerHTML;
  8.     return '<body>' + htm + '</body>';
  9.   }

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

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

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

        来看看效果

 结束！！！

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发