导出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'); 
    });