相信各位前端工程狮们在一些报表项目，管理系统项目中都会遇到在这样的需求：申请报、表格、简历等等图文信息有导出为PDF文件。下面是记录我在项目中完成该需求的代码dome，发布出来也是希望对大家有些帮助。

1，整体思路

将HTML元素打印或导出为PDF文件，无非就是提取元素页面内容，然后转化为图片，将图片保存为PDF文件。

2，准备工作

将HTML元素转化为图片：html2canvas.js  插件；

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

导出为PDF文件：jspdf.js插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

3，dome

HTML：

    <button id="btn">导出为PDF文件</button>
    <div id="pdfDom">
        <table>
            <th></th>
        </table>
        <ul id="box"></ul>
    </div>

Javascript：

<script>
    let obox = document.getElementById("box")
    let opdfdom = $("#pdfDom")    
    let obtn = document.getElementById("btn")    
    let lihtml = ''    
    for(let i = 0; i < 50; i++){        
    lihtml += "<li>条目"+i+"</li>"    }    
    obox.innerHTML = lihtml    
    obtn.onclick = function(){        
    downLoadPdf(opdfdom)    
    }    
    function downLoadPdf(content){        
    content = content ? content : null;        
    // 条件判断是否打印        
    if(!content){            
    alert("打印失败，请重新操作")            
    return false        
    }        
    // 开始打印        
    console.log(content)        
    var contentWidth = content.width();        
    var contentHeight = content.height();        
    var canvas = document.createElement("canvas")        
    canvas.width = contentWidth        
    canvas.height = contentHeight        
    var context = canvas.getContext("2d");        
    html2canvas(content,{            
    allowTaint:true,            
    scale:2  // 提升画面质量，但是会增加文件大小        
    }).then(function(canvas){            
    var pdfWidth = canvas.width;            
    var pdfHeight = canvas.height;            
    var pageHeight = pdfWidth / 592.28 * 841.89;            
    var leftHeight = pdfHeight;            
    var position = 0;            
    var imgWidth = 595.28;            
    var imgHeight = 595.28 / pdfWidth * pdfHeight;            
    var pageData = canvas.toDataURL("img/jpeg",1.0);            
    var pdf = new jsPDF('', 'pt', 'a4');            
    // 判断打印dom高度是否需要分页，如果需要进行分页处理            
    if(leftHeight < pageHeight){                
    pdf.addImage(pageData,"JPEG",0,0,imgWidth,imgHeight)            
    }else{                
    while(leftHeight > 0){                    
    pdf.addImage(pageData,"JPEG",0,position,imgWidth,imgHeight)                    
    leftHeight -= pageHeight                    
    position -= 841.89                    
    if(leftHeight > 0){                        
    pdf.addPage()                    
    }                
    }            
    }            
    pdf.save("案例.pdf")        
    })    
    }
</script>

4，结果