jsPDF fromHTML() 不显示 HTML答案

【问题标题】：jsPDF fromHTML() does not show HTMLjsPDF fromHTML() 不显示 HTML
【发布时间】：2015-05-26 21:14:37
【问题描述】：

我正在研究一个简单的 javascript。我正在使用 jsPDF 库，但脚本加载了一个空白的 pdf。

这是代码：

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>fromHTML EX</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.22" />

    <script type="text/javascript" src="/root/utils/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.split_text_to_size.js"></script>

    <script type="text/javascript" src="/root/utils/jsPDF-master1/js/basic.js"></script>
    <script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.js"></script>
    <script type="text/javascript" src="/root/utils/jsPDF-master1/jspdf.plugin.from_html.js"></script>

  <script type="text/javascript">
    function PDF1(){
    var doc = new jsPDF();          
    var elementHandler = {
    '#ignorePDF': function (element, renderer) {
    return true;
    }
    };
    var source = window.document.getElementsByTagName("body")[0];
    doc.fromHTML(
        source,
        15,
        15,
        {
        'width': 180,'elementHandlers': elementHandler
        });

    doc.output("datauri");
    }

    PDF1()
  </script>

</head>

 <body>
     ASDSADASDASDSA
      <div>
    <p id="ignorePDF">don't print this to pdf</p>

      <p><font size="3" color="red">print this to pdf</font></p>
    </div>




  </body>


</html>

我已经尝试将调用函数放在页面底部，但它仍然不起作用。有人可以帮我吗？

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

既然你用jQuery试试：

$( document ).ready(function() {
  //console.log( "ready!" );
  PDF1();
});

另请注意：您可以使用（非必需）：

var source = $("body")[0];

用于测试的代码页

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>fromHTML EX</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Geany 1.22" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://parall.ax/parallax/js/jspdf.js"></script>

  <script type="text/javascript">
  function PDF1(){
    var doc = new jsPDF();
    var elementHandler = {
      '#ignorePDF': function (element, renderer) {
        return true;
      }
    };
    var source = window.document.getElementsByTagName("body")[0];
    doc.fromHTML(
      source,
      15,
      15,
      {
        'width': 180,'elementHandlers': elementHandler
      });

      doc.output("datauri");
    }

    $( document ).ready(function() {
      //console.log( "ready!" );
      PDF1();
    });
</script>

  </head>

  <body>
    ASDSADASDASDSA
    <div>
      <p id="ignorePDF">don't print this to pdf</p>

      <p><font size="3" color="red">print this to pdf</font></p>
    </div>




  </body>
  </html>

【讨论】：

我不介意投反对票，这就是 stackoverflow 的基础，但如果在 3 年内发生了一些变化，知道您为什么认为它是无效的解决方案，那就太好了。谢谢。

【解决方案2】：

此代码也可用于使用 jsPDF 导出为 pdf。

var pdf = new jsPDF('p','pt','a4');
let pdfConf = {
pagesplit: true, //Adding page breaks manually using pdf.addPage();
background: '#fff' //White Background.
};
pdf.fromHTML($('#capture').get(0),20,20,{
width:500
})

pdf.save("download.pdf");

【讨论】：