JSPDF .html()函数返回空白PDF页面

Question

使用新的jsPDF .html()代码，几乎直接从其文档中提取，请注意仍会导致空白页面：

导致空白页面：

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc.innerHTML, {
           callback: function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

没有生成PDF文件的结果：

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc.innerHTML, {
           function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

也会导致空白页面：

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc, {
           callback: function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

如果有其他建议，将使用其他工具。需要它是安全的并生成可选择文本PDF以保持总体大小较小。正在生成一个很长的文档，如果通过addImage()进行，则生成的文件非常大。你有什么想法吗？

- user2521295

---

请问您的问题解决了吗？我的回答有帮到您吗？ - Pallamolla Sai

Answer 1

尝试了一整天后，我得出了以下解决方案。我认为我们之所以会得到空白页面是因为html2canvas的版本问题。我使用更新的 jspdf(1.5.3) 和 html2canvas(1.0.0-rc.3)，因此导致pdf为空白。当我改用html2canvas(1.0.0-alpha.12)与jspdf(1.5.3)搭配时，生成的pdf有内容（不为空白）。因此，最好更改html2canvas的版本以便使用最新的.html()方法。

 // scripts included
 <script type="text/javascript" src="html2canvas.js"></script> // 1.0.0-alpha.12 downloaded

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

//html  
<div id='doc'>
    <p>Hello world</p>
    <div class="first-page">
        <h1>bond</h1>
        <img src="1.png"/>
    </div>
    <div class="second-page">
        <img src="2.png"/>
    </div>
</div>
<button onclick="saveDoc()">click</button>

// javascript

 <script type="text/javascript">
    var pdf = new jsPDF('p', 'pt', 'a4');

    function saveDoc() {
        window.html2canvas = html2canvas
        const doc = document.getElementsByTagName('div')[0];

        if (doc) {
            console.log("div is ");
            console.log(doc);
            console.log("hellowww");



            pdf.html(document.getElementById('doc'), {
                callback: function (pdf) {
                    pdf.save('DOC.pdf');
                }
            })
       }
     }
   </script>

html2canvas 1.0.0 alpha.12

.html() 在 github 上无法使用

- Pallamolla Sai

---

我敢打赌这就是全部问题所在！最终我遇到了其他一些问题，这要求我在这个项目中使用一个不同的PDF生成系统（而不是jspdf），但是这让人明白html2canvas版本是罪魁祸首。非常感谢您深入研究这个问题！ - user2521295

兄弟...你救了我一命，否则我就要把我的笔记本扔出窗外了。谢谢你。 - Matthew Ellis

好的，我会再试一次并通知你 @FiddleFreak。 - Pallamolla Sai

订阅 Promise 对象解决了我的问题 pdf.html(doc).then(() => pdf.save('test.pdf'));。 - AndrewBenjamin

你还会建议这个解决方案吗，@PALLAMOLLASAI？ - August Asheim Birkeland

Answer 2

对于我来说，解决方法是添加回调/承诺行为 --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); 看起来html()方法是异步的，当基于其他例子下载时下载的文件还没有准备好 --- 这就是为什么它是空的。

- Andrei Tudose