element - ui 표 인쇄

2041 단어 자바 scriptvue.jselement-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()
}
시스템 해킹 01주차
람다의 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage