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

【问题标题】：print hidden div of visibility:collapse to pdf打印可见性的隐藏 div：折叠为 pdf
【发布时间】：2026-01-03 20:35:02
【问题描述】：

我正在使用 jspdf 将 html 元素打印为 pdf。如果 div 部分未隐藏，则打印 pdf 以查看 html 元素的内容。当 html 元素的部分被隐藏或折叠时，它会打印一个空白的 pdf 文档。这是sn-ps

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

【问题讨论】：

标签： javascript jquery html css pdf

【解决方案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 
}

【讨论】：