js将网页导出成pdf（js 打印指定div内容）2020-09-02

Posted 2023-05-12

参考技术A <input type="button"  id="button" value="点击打印"/>

<div id="div_print">

<p>打印此处内容</p>

</div>

<script type="text/javascript">

function printdiv(printpage)

  var newstr=document.getElementById(printpage).innerhtml;

  var oldstr=document.body.innerHTML;

  document.body.innerHTML=newstr;

  window.print();

  document.body.innerHTML=oldstr;

  return false;



window.onload=function()

  var bt=document.getElementById("button");

  bt.onclick=function()printdiv('div_print');



</script>

html, body

 overflow:visible;  



打印时另存为pdf模式打印后的内容可复制 默认为Microsoft Print to PDF 模式

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

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

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