下載HTML <div> 使用jsPDF轉換為pdf

Question

我正在嘗試使用jsPDF將div值下載到PDF中，這里是我編寫的代碼：

<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="jsPDF.js"></script>
    <script>
    $(function () {
      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');
      });
    });
    </script>
  </head>
  <body>
    <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>
  </body>
</html>

但是點擊按鈕時沒有發生任何事情......我已經從這個鏈接下載了jsPDF。

我無能為力，任何人都可以幫助我。

Answer 1

從https://github.com/MrRio/jsPDF/tree/master/dist中選擇jspdf.min.js

那應該工作：

....
<script src="jspdf.min.js"></script>
<script>
$(function () {

  $('#cmd').click(function () {
    var doc = new jsPDF();
    doc.addHTML($('#content')[0], 15, 15, {
      'background': '#fff',
    }, function() {
      doc.save('sample-file.pdf');
    });
  });
});
</script>
....

Answer 2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
      <script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
      <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
    $('#download').click(function() {       
        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL('image/png'); 
                $("#imgRes").attr("src", imgData);             
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
    });
});
});//]]> 
</script>

這是一個HTML工作，我測試了很多次。 並使用相同的代碼。

<img id="imgRes" height="500px" width="770px"  />
   <div id="canvas" style="background-image:url(fimage/1.jpg)"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div> 
<button id="download">Download Pdf</button>

下載HTML <div> 使用jsPDF轉換為pdf

問題描述

2 個解決方案

解決方案1
8 2014-09-18 09:22:46

解決方案2
1 2016-01-20 11:20:10

下載HTML <div> 使用jsPDF轉換為pdf

問題描述

2 個解決方案

解決方案1 8 2014-09-18 09:22:46

解決方案2 1 2016-01-20 11:20:10

解決方案1
8 2014-09-18 09:22:46

解決方案2
1 2016-01-20 11:20:10