element-ui表格打印
打印需要⽤到的组件为
普通表格打印
⼀般的表格打印直接仿照组件提供的例⼦就可以了。
printJS({
printable: id, // DOM id
type: 'html',
scanStyles: false,
})element表格横向滚动条
element-ui 表格打印
element-ui 的表格，表⾯上看起来是⼀个表格，实际上是由两个表格组成的。
表头为⼀个表格，表体⼜是个表格，这就导致了⼀个问题：打印的时候表体和表头错位。
另外，在表格出现滚动条的时候，也会造成错位。
解决⽅案
我的思路是将两个表格合成⼀个表格，print-js组件打印的时候，实际上是把 id 对应的 DOM ⾥的内容
提取出来打印。
所以，在传⼊ id 之前，可以先把表头所在的表格内容提取出来，插⼊到第⼆个表格⾥，从⽽将两个表格合并，这时候打印就不会有错位的问题了。
function printHTML(id) {
const html = document.querySelector('#' + id).innerHTML
// 新建⼀个 DOM
const div = ateElement('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 >' + 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 }' // 表格样式
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。