更多文章

打印需要用到的组件为 print-js

普通表格打印

一般的表格打印直接仿照组件提供的例子就可以了。

printJS({
    printable: id, // DOM id
    type: \'html\',
    scanStyles: false,
})

element-ui 表格打印

element-ui 的表格，表面上看起来是一个表格，实际上是由两个表格组成的。

表头为一个表格，表体又是个表格，这就导致了一个问题：打印的时候表体和表头错位。
在这里插入图片描述
另外，在表格出现滚动条的时候，也会造成错位。

在这里插入图片描述

解决方案

我的思路是将两个表格合成一个表格，print-js 组件打印的时候，实际上是把 id 对应的 DOM 里的内容提取出来打印。
所以，在传入 id 之前，可以先把表头所在的表格内容提取出来，插入到第二个表格里，从而将两个表格合并，这时候打印就不会有错位的问题了。

function printHTML(id) {
    const html = document.querySelector(\'#\' + id).innerHTML
    // 新建一个 DOM
    const div = document.createElement(\'div\')
    const printDOMID = \'printDOMElement\'
    div.id = printDOMID
    div.innerHTML = html

    // 提取第一个表格的内容 即表头
    const ths = div.querySelectorAll(\'.el-table__header-wrapper th\')
    const ThsTextArry = []
    for (let i = 0, len = ths.length; i < len; i++) {
        if (ths[i].innerText !== \'\') ThsTextArry.push(ths[i].innerText)
    }

    // 删除多余的表头
    div.querySelector(\'.hidden-columns\').remove()
    // 第一个表格的内容提取出来后已经没用了 删掉
    div.querySelector(\'.el-table__header-wrapper\').remove()

    // 将第一个表格的内容插入到第二个表格
    let newHTML = \'<tr>\'
    for (let i = 0, len = ThsTextArry.length; i < len; i++) {
        newHTML += \'<td style="text-align: center; font-weight: bold">\' + ThsTextArry[i] + \'</td>\'
    }

    newHTML += \'</tr>\'
    div.querySelector(\'.el-table__body-wrapper table\').insertAdjacentHTML(\'afterbegin\', newHTML)
    // 将新的 DIV 添加到页面 打印后再删掉
    document.querySelector(\'body\').appendChild(div)
    
    printJS({
        printable: printDOMID,
        type: \'html\',
        scanStyles: false,
        style: \'table { border-collapse: collapse }\' // 表格样式
    })

    div.remove()
}

版权声明：本文为woai3c原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/woai3c/p/11692293.html