HTML() 中的 jsPDF 不显示 HTML

Question

我的工作很简单 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>

我试过将调用函数放在页面底部，但还是不行。有人可以帮助我吗？

Answer 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>

Answer 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");

HTML() 中的 jsPDF 不显示 HTML

jsPDF fromHTML() does not show HTML

javascript

jspdf

用于测试的代码页