使用print-js庫
1.普通表格
printJS({ printable: id, // DOM id type: 'html', scanStyles: false, })
2.element-ui表格打印
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() }