使用 jsPDF 将 HTML 内容转换为 PDF 文件答案

【问题标题】：Converting HTML content to PDF file using jsPDF使用 jsPDF 将 HTML 内容转换为 PDF 文件
【发布时间】：2023-07-27 23:50:01
【问题描述】：

尝试自动将此内容转换为 pdf 文件。根据我的其余代码的设置方式，我必须有一个按钮来单击要导出为 pdf 的 div 内部。这是一个问题吗？这是我到目前为止所拥有的。当我单击按钮时，它什么也不做。

JS：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<script>
jQuery('#generatereport').click(function () {
    doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
        'width': 170
    });
    doc.save('sample-file.pdf');
});
</script>

HTML：

<div class="survey-results" style="display: none;" id="lppresults">
   <button id="generatereport">Download Report</button>
   TEST CONTENT
</div>

【问题讨论】：

我猜你有 JS 到 .html 文件？
@VictorArcas 是的，没错

标签： javascript jquery html pdf jspdf

【解决方案1】：

不，这不是问题。您可以在 div 元素中添加按钮。虽然你有一些其他的问题。这是您的代码的修订版本...

var doc = new jsPDF();
$('#generatereport').click(function() {
   doc.fromHTML($('#lppresults')[0], 15, 15, {
      width: 170
   }, function() {
      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://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<div class="survey-results" id="lppresults">
  <button id="generatereport">Download Report</button> TEST CONTENT
</div>

【讨论】：

感谢您的回答！我看到您的代码 sn-p 有效，但是当我在我的网站上实现时，该按钮仍然没有任何作用。在我的#lppresults div 里面有更多的 div（不仅仅是文本）——这应该没关系吧？另外，我在一个只接受 HTML 的页面上做这一切。我让我的 javascript 工作的唯一方法是将 $ 更改为 jQuery - 我应该不必这样做吗？我想知道是否有其他干扰。
不，多个 div 无关紧要，$ 和 jQuery 也不重要。确保在关闭 </body> 标记之前放置脚本。您还看到控制台中的任何错误吗？
嗯。我的脚本位于页面顶部（位于 wordpress 上），因此绝对位于

【解决方案2】：

你需要初始化jsPDF类：var doc = new jsPDF();

var doc = new jsPDF();
jQuery('#generatereport').click(function() {
  doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
    'width': 170
  });
  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://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>


<div class="survey-results" id="lppresults">
  <button id="generatereport">Download Report</button> TEST CONTENT
</div>

【讨论】：