JavaScriptを使って、ユーザーのクリックでHTMLページをPDFに書き出す

Question

さらに

ソース非AMP版編集

JavaScriptを使って、ユーザーのクリックでHTMLページをPDFに書き出す

ユーザーが「GeneratePDF」ボタンをクリックすると、HTMLページをPDFファイルにエクスポートする必要があります。HTMLページをPDFファイルにエクスポートすることには成功しましたが、1回目のクリックではデータをPDFにダウンロードすることができましたが、2回目のクリックではデータをPDFファイルにダウンロードすることができませんでした。コードのどこが間違っているのかわかりません。

こちらのコードをご確認ください。

$(function() {
  var doc = new jsPDF();
  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $('#cmd').click(function() {
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>

<body id="target">
  <div id="content">
    <h3>Hello, this is a H3 tag</h3>
    <a class="upload">Upload to Imgur</a> 
    <h2>this is <b>bold</b> <span style="color:red">red</span></h2> 
    <p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
      as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the
      DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering
      from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
    </p>

  </div>
  <button id="cmd">generate PDF</button>
</body>

</html>

halfer

編集された質問 2日 4月 2017 в 10:12

プログラミング

javascript jquery jspdf

5日 11月 2013 в 9:56

7 ビュー

Kristof Feys · Accepted Answer · 2013-11-05T10:30:46+00:00

これは、"doc"変数をクリックイベントの外で定義しているからです。最初にボタンをクリックしたときには、doc 変数には新しい jsPDF オブジェクトが入っています。しかし、2回目のクリック時には、この変数はもう同じようには使用できません。なぜなら、この変数はすでに定義され、前回使用されたものだからです。

に変更します。

$(function () {

    var specialElementHandlers = {
        '#editor': function (element,renderer) {
            return true;
        }
    };
 $('#cmd').click(function () {
        var doc = new jsPDF();
        doc.fromHTML(
            $('#target').html(), 15, 15, 
            { 'width': 170, 'elementHandlers': specialElementHandlers }, 
            function(){ doc.save('sample-file.pdf'); }
        );

    });  
});

に変更すると動作します。