導出HTML div內容爲pdf，點擊按鈕

Question

我想導出選定的div爲PDF。該div包含文本，圖像和一些圖表。

<div id="newdiv"> 
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200px" width="200px"> 
    <p>A Paragraph A Paragraph A Paragraph A Paragraph</p> 
</div> 
<button type="button">click</button> 

與所有的CSS屬性

Answer 1

您將需要一個插件，例如：

• https://github.com/MrRio/jsPDF
• https://github.com/mozilla/pdf.js

我舉這個真棒JSFiddle向您展示如何可以辦到。下面我通過我從這個小提琴引用的代碼。

//HTML 
    <div id="content"> 
     <h3>Hello, this is a H3 tag</h3> 

     <p>a pararaph</p> 
    </div> 
    <div id="editor"></div> 
    <button id="cmd">generate PDF</button> 


//jQuery 
    var doc = new jsPDF(); 
    var specialElementHandlers = { 
     '#editor': function (element, renderer) { 
      return true; 
     } 
    }; 

    $('#cmd').click(function() { 
     doc.fromHTML($('#content').html(), 15, 15, { 
      'width': 170, 
       'elementHandlers': specialElementHandlers 
     }); 
     doc.save('sample-file.pdf'); 
    });