jsPDF 输出文件为空

Question

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

我在 GitHub

上使用了 jsPDF 中的基本描述

我一定是漏掉了什么，因为下载的文件似乎没有任何可见数据。我将 OSX Mavericks 与 Google Chrome 一起使用，结果与 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 可能不会工作，但对于简单的东西应该没问题。

html2canvas 对于 fromHTML 不是必需的，但对于 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 输出文件为空

jsPDF output file is empty

javascript

jspdf