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

问题描述

使用新的jsPDF .html()可以直接从他们的文档中提取出来，但仍然会导致空白页:

Using the new jsPDF .html() pretty much pulled straight from their docs, but it still results in a blank page:

结果显示为空白页

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()进行操作时，结果文件很大.有想法吗?

Will use another tool if there are any other suggestions. Need it to be secure and generate selectable text PDF to keep overall size down. It's a long document it's generating and when doing it via addImage() the resulting file is huge. Thoughts?

推荐答案

经过一整天的尝试，下面提供了解决方案.我认为由于html2canvas的版本，我们正在获得空白页.我正在使用带有 html2canvas (1.0.0-rc.3)的更新的 jspdf (1.5.3).由于这个原因，我得到了空白的pdf.当我将html2canvas( 1.0.0-alpha.12 )与jspdf(1.5.3)一起使用时，我得到的是包含内容的pdf(非空白).因此最好更改html2canvas的版本，以便使用新的.html()方法.

After trying whole day came with following solution. I think we are getting blank page because of versions of html2canvas. I was using updated jspdf(1.5.3) with html2canvas(1.0.0-rc.3). Due to this I was getting blank pdf. When I use html2canvas(1.0.0-alpha.12) with jspdf(1.5.3) I am getting pdf with contents(not blank). So better to change version of html2canvas in order to work with newly .html() method.

 // 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上运行

这篇关于JSPDF .html()函数返回空白pdf页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！