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() 生成的文件很大。想法？

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() not working github

Answer 2

对我来说，可行的解决方案是添加 callback/promise 行为 --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); 似乎 html() 方法异步工作，并且要下载的文件在根据另一个示例下载 --- 这就是为什么它是空的。

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

JSPDF .html() function returning blank pdf page

pdf

pdf-generation

jspdf