element-ui 表格打印

更多文章

打印需要用到的組件為 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()
}