jsPDF fromHTML() does not show HTML

jsPDF fromHTML() does not show HTML

本文关键字：not show HTML does fromHTML jsPDF      更新时间：2023-09-26

我使用一个简单的javascript。im使用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>

我试着把调用函数放在页面的底部，但它仍然不起作用。有人能帮我吗？

由于您正在使用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>

此代码也可用于使用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");
相关文章：