使用htm2canvas+jsPDF將指定區域導出成PDF

最近因項目需求,須要打印彈窗表單內容,因此在網上找了找發現了許多優質的帖子,本文章代碼基本參考該帖內容,寫此文章只爲鞏固加深印象,文末是原貼連接html

const pdfDownload = ()=>{
    let target = document.getElementsByClassName('ant-layout')[0] //打印區域  
    target.style.background = '#FFF' //打印內容務必保持背景色爲白色
    html2canvas(target, {
        dpi: 172,
        useCORS: true
    }).then((canvas)=>{
        let cW = canvas.width,
            cH = canvas.height,
            pH = cW / 592.28 * 841.89,
            position = 0,
            iW = 595.28,
            iH = 592.28 / cW * cH,
            pData = canvas.toDataURL('image/jpeg', 1.0),
            { jsPDF } = jspdf
            pdf = new jsPDF('', 'pt', 'a4')
            
        if(cH < pH){
            pdf.addImage(pData, 'JPEG', 0, 0, iW, iH)
        }
        else{
            while(cH > 0){
                pdf.addImage(pData, 'JPEG', 0, position, iW, iH)
                cH -=pH
                position -= 841.89
                if(cH > 0){
                    pdf.addImage()
                }
            }
        }
        
        pdf.save('form.pdf')
    })
    
}

相關連接
https://segmentfault.com/a/11...canvas

相關文章
相關標籤/搜索