使用htm2canvas+jsPDF将指定区域导出成PDF

Posted 2021-09-25 FromXTLeo

最近因项目需求，需要打印弹窗表单内容，所以在网上找了找发现了许多优质的帖子，本文章代码基本参考该帖内容，写此文章只为巩固加深印象，文末是原贴链接

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...