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

【问题标题】：Export HTML page to PDF on user click using JavaScript使用 JavaScript 在用户单击时将 HTML 页面导出为 PDF
【发布时间】：2013-11-05 09:56:21
【问题描述】：

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

【问题讨论】：

也许stackoverflow.com/questions/18191893/… ?
不，我试过了..它不工作
我已经回滚了这个问题，因为你只是合并了 Kristof 的答案，使答案失去了意义。那不行，当你有新问题时，问一个新问题，如果原来的问题已经有了答案，就不要改变它。谢谢！
嘿，它在 IE9 中对你有用吗？

标签： javascript jquery jspdf

【解决方案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'); }
        );

    });  
});

它会起作用的。

【讨论】：

谢谢 Kristof Feys，但是当我点击按钮时，我可以看到 2 个窗口。一个是保存到 PDF 窗口，另一个新窗口正在打开 pdf 视图，如何在新窗口中删除 PDf 视图...
嗯......当我在 jsFiddle 中测试这个时，我只收到了“保存到 pdf”窗口。我的猜测是这两个窗口与浏览器/插件相关......
是的，在 jsFiddle 中它只获得 SaveTo PDF 窗口，但在主应用程序中，当用户单击时，它又打开了一个窗口，我如何删除该新窗口。
由于我无法重现您的问题，我也无法真正调试它。您可能会尝试删除所有使用的 javascript 插件（jquery 和 jspdf 除外），然后查看它是否有效。之后，您可以一一重新添加它们以查看哪个产生了错误（如果我的猜测是正确的并且其中一个当然产生了问题）......或者如果您可以在 jsFiddle 上重现该问题，这也可能有所帮助:)
$(document).ready(function) 和 $(function) 是相同的； learn.jquery.com/using-jquery-core/document-ready 只是说，“如果你编写的代码让没有 jQuery 经验的人可能会看到，最好使用长格式。”