Question

我正在使用jspdf将html元素打印为pdf。如果div部分未隐藏，则pdf打印以查看html元素的内容。当html元素的部分处于隐藏或折叠状态时，它将打印空白的pdf文档。这是片段

function bookPDF() {
          // Get the element.
          var element = document.getElementById('bookPDF');
        var opt = {
          margin:       1,
          filename:     'book.pdf',
          image:        { type: 'png', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
        };

        html2pdf().set(opt).from(element).save();

        }

这是显示的html元素

 <a onclick="bookPDF()" class="ui button"> 
          <i class="download icon"></i>&nbsp;Book</a>

<div id="bookPDF" 
 style="visibility:collapse max-width:60%; margin:0 auto; background: #fff;border-bottom: 1px solid #ffffff;" 
 class="table-wrapper ui basic segment">

  <h1 class="ui dividing header center aligned">
    Books collections
  </h1>
  ......//more content but pdf prints does not print
</div

如何解决这个问题...即使被css元素隐藏，也要打印pdf

Answer 1

您可以尝试使其暂时可见，然后在打印后将其隐藏，如下所示：

function bookPDF() {
  // Get the element.
  var element = document.getElementById("bookPDF");
  var opt = {
    margin: 1,
    filename: "book.pdf",
    image: { type: "png", quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: "in", format: "letter", orientation: "portrait" }
  };

  element.style.visibility = "visible"; // <== here 

  html2pdf().set(opt).from(element).save();

  element.style.visibility = "hidden"; // <== and here 
}

打印隐藏的div可见性：折叠为pdf

1 个答案: