首页 文章

jsPDF fromHTML()不显示 HTML

提问于
浏览
3

我正在一个简单的 JavaScript 工作。即时通讯使用 jsPDF lib,但脚本加载一个空白的 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>

我试图将调用函数放在页面底部,但它仍然无法正常工作。有人能帮我吗?

1 回答

  • 8

    既然你正在使用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>
    

相关问题