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

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

阅读 1.1k
3 声望
0 粉丝
0 条评论
3 声望
0 粉丝
文章目录
宣传栏