Question

我正在尝试将DIV输出为PDF文件。

我在GitHub上使用了jsPDF的基本描述

我一定错过了什么，因为下载的文件似乎没有任何可见数据。我在OS Chrome中使用OSX Mavericks，与Safari类似。该文件大3kb

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

</head>

<body>

<div id="ResultsReport">
     <h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3>

    <p>a pararaph</p>
</div>

<button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>

<script>
  var code = "UNIQ_ALL";

    function btnPDF(code) {

        var doc = new jsPDF()
        var repPDF = document.getElementById('ResultsReport').innerHTML;
        alert("REP=" + repPDF);
        doc.text(repPDF);
        //doc.text("<h4>This is just a test</h4>");
        doc.save(code + '.pdf');  
    }
</script>
</body>
</html>

Answer 1

我不知道jspdf库，但这样可以正常工作：

var code = "UNIQ_ALL";

 function btnPDF(code) {

     var doc = new jsPDF()
     var repPDF = document.getElementById('ResultsReport').innerText;
     doc.text(repPDF, 10, 10); // <-- add 10, 10
     doc.save(code + '.pdf');
 }

<!DOCTYPE html>
<html>

<head>
  <title>Untitled</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

</head>

<body>

  <div id="ResultsReport">
    <h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3>

    <p>a pararaph</p>
  </div>

  <button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>
</body>

</html>

我还将innerHTML属性更改为innerText以提取文本而不是HTML。

修改：

使用旧版本的jsPDF（1.0.272），您可以尝试fromHTML方法。我认为这是一个早期的渲染器，因此花哨的HTML可能不会起作用，但对于简单的东西应该没问题。
对于fromHTML，不需要html2canvas，但我认为它是addHTML。

var code = "UNIQ_ALL"; function btnPDF(code) { var doc = new jsPDF(); doc.fromHTML($("#ResultsReport")[0], 10, 10); doc.save(code + '.pdf'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> <div id="ResultsReport"> <h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3> <p>a <b>bold</b> pararaph</p> </div> <button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>

jsPDF输出文件为空

1 个答案: