欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

 相信各位前端工程獅們?cè)谝恍﹫?bào)表項(xiàng)目，管理系統(tǒng)項(xiàng)目中都會(huì)遇到在這樣的需求：申請(qǐng)報(bào)、表格、簡(jiǎn)歷等等圖文信息有導(dǎo)出為PDF文件。下面是記錄我在項(xiàng)目中完成該需求的代碼dome，發(fā)布出來(lái)也是希望對(duì)大家有些幫助。

1，整體思路

將HTML元素打印或?qū)С鰹镻DF文件，無(wú)非就是提取元素頁(yè)面內(nèi)容，然后轉(zhuǎn)化為圖片，將圖片保存為PDF文件。

2，準(zhǔn)備工作

將HTML元素轉(zhuǎn)化為圖片：html2canvas.js  插件；

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

導(dǎo)出為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">導(dǎo)出為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("打印失敗，請(qǐng)重新操作")            
    return false        
    }        
    // 開(kāi)始打印        
    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  // 提升畫面質(zhì)量，但是會(huì)增加文件大小        
    }).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高度是否需要分頁(yè)，如果需要進(jìn)行分頁(yè)處理            
    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，結(jié)果