使用 JavaScript 在用户单击时将 HTML 页面导出为 PDF

IT技术 javascript jquery jspdf
2021-01-15 17:20:49

当用户单击 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>

1个回答

这是因为您在点击事件之外定义了“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 插件(jquery 和 jspdf 除外),然后看看它是否有效。之后您可以将它们一一重新添加以查看哪个产生错误(如果我的猜测是正确的并且其中之一产生了问题)...... :)
2021-03-17 17:20:49
$(document).ready(function) 和 $(function) 是一样的;learn.jquery.com/using-jquery-core/document-ready只是说,“如果您正在编写没有 jQuery 经验的人可能会看到的代码,最好使用长格式。”
2021-03-17 17:20:49
谢谢 Kristof Feys,但是当我单击按钮时,我可以看到 2 个窗口。一个是保存到 PDF 窗口,另一个新窗口正在打开 pdf 视图,如何在新窗口中删除 PDf 视图...
2021-03-23 17:20:49
嗯...当我在 jsFiddle 中测试时,我只收到了“保存到 pdf”窗口。我的猜测是这两个窗口与浏览器/插件相关...
2021-04-12 17:20:49
是的,在 jsFiddle 中,它只获得 SaveTo PDF 窗口,但在主应用程序中,当用户单击时,它又打开了一个窗口,我如何删除该新窗口。
2021-04-13 17:20:49