解决print-js打印element-ui的table时表头和内容错位问题

问题：table打印的时候错位的问题，像下图这样

 导致他的原因：把要打印的节点复制出来长这样，他里面有两个table，分别有自己的colgroup，看起来一样，但是因为打印可能会缩放table，宽度的缩放两个table就有点差异，导致的错位

 

整体的打印实现步骤如下，直接看解决方法的，请往下滑~

1. 安装print-js

npm install print-js --save 

2. 在node_module下面找到print-js文件夹，然后把dist文件里面的print.js文件复制到项目中，然后把package.json里面的引入和包都删掉。

 3. 在main.js中引入pint.js

import printJS from '@/utils/print.js'

4. 打印按钮页面

<el-button type="primary" @click="handlePrint">打印</el-button>

methods里面的方法

//打印
handlePrint() {
    printJS({
        printable: 'printme', // '打印区域', // 标签元素id
        type: 'html',
        header: formatDate(new Date()), // '表单',
        targetStyles: ['*'],
        style: printStyle(), // 打印的内容是没有css样式的，所以此处需要string类型的css样式，必须是css，因为识别不了less
        scanStyles: false,
    })
},

printStyle.js文件，设置table的样式

export default function printfstyle() {
  return `
  table {
    width:100%!important;
  }
  td {
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
    padding: 10px 0;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    color: #606266;
  }
  td:last-child, th:last-child {
    border-right: 1px solid #dfe6ec;
  }
  th {
    vertical-align: middle;
    overflow: hidden;
    word-break: break-word;
    background-color: #f8f8f9 !important; // 没生效，不知道为啥
    color: #515a6e;
    height: 40px;
    font-size: 14px;
    border-bottom: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
  }
  `
}

 

到这里，点击打印就会出来最开始的那个错位表格了

下面就是具体解决错位问题的代码啦。解决方案是获取到元素，将上面table的thead内容插入到下面的table的tbody前面

thead里面有多一个 th，要先把它删掉

5.  修改pint方法

在pint.js文件里面找到pint方法找到下面这句代码

params.printableElement = cloneElement(printElement, params); 

替换为

let printableElement = cloneElement(printElement, params); 

const headerEle = printableElement.getElementsByTagName('thead')[0];
const trEle = headerEle.getElementsByTagName('tr')[0];
// 获取最后一个th
var lastChildNode = trEle.lastElementChild;
// 删除
trEle.removeChild(lastChildNode);
var bodyEle = printableElement.getElementsByTagName("tbody")[0]
// 在下面一个table的tbody前面插入修改后的thead
bodyEle.parentNode.insertBefore(headerEle, bodyEle);

params.printableElement = printableElement

效果如下。到这里就结束啦！鼓巴巴掌~