使用JavaScript在用戶點擊時將HTML頁面導出為PDF

Question

當用戶點擊GeneratePDF按鈕時，我需要將html頁面導出為PDF文件。 我成功將HTML頁面導出為PDF文件，但只有第一次點擊我才能將數據下載到PDF中，但是從第二次點擊我無法將數據下載到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>

Answer 1

這是因為您在click事件之外定義了“doc”變量。 第一次單擊按鈕時，doc變量包含一個新的jsPDF對象。 但是當您再次單擊時，此變量不能再以相同的方式使用。 因為它已經定義並使用了前一次。

將其更改為：

$(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'); }
        );

    });  
});

它會起作用。

使用JavaScript在用戶點擊時將HTML頁面導出為PDF

問題描述

1 個解決方案

解決方案1
28 已采納 2013-11-05 10:30:46

使用JavaScript在用戶點擊時將HTML頁面導出為PDF

問題描述

1 個解決方案

解決方案1 28 已采納 2013-11-05 10:30:46

解決方案1
28 已采納 2013-11-05 10:30:46