记录el-table打印不全问题

遇到的问题：做打印功能时，用window.print()遇到了el-table打印不全，缺失了一些列表。

 页面上的效果：

浏览器打印的效果：

 看得出来下面的表格缺失了一半，最上面的el-descriptions则不存在缺失。

查阅了很多方法，最终选择了我认为最简单省事的一个方法，在原有的基础上仅仅改动了一点就成了，直接上代码：

const tableNode = document.querySelectorAll('.el-table__header,.el-table__body');
      //el-table 打印不全的问题
      for (let k6 = 0; k6 < tableNode.length; k6++) {
        const tableItem = tableNode[k6];
        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-table 格子里面打印超过格子的问题
      let cells = document.querySelectorAll('.cell');
      for (let k7 = 0; k7 < cells.length; k7++) {
        const cell = cells[k7];
        cell.style.width = '100%';
        cell.removeAttribute('style')
      }

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

解决思路：

1.设置col的具体宽度，达到匹配打印区域的px？ ok，失败了，效果并不显著，而且会破坏我们的版面 很难看

2.那把col的具体宽度设置成百分比就OK了。修改尝试了el-table的属性、样式、样式穿透，发现%最终都会计算成px，怎么办呢

3.那就从需要打印的dom入手，最终找到了上述代码，直接改变dom里table和cell的width属性。ok，成功啦！

初步完成效果：

其他打印方式：

1.vue-print-nb

2.html2canvas和jspdf

3.html2canvas和print-js 

内容参考 ：https://www.cnblogs.com/xuelan/p/16575936.html