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 = ''
    for (let i = 0, len = ThsTextArry.length; i < len; i++) {
        newHTML += '' + ThsTextArry[i] + ''
    }

    newHTML += ''
    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()
}