Question

我使用以下脚本将某个div打印为pdf文件。

(function ($) {
$('.print-me').on('click', function () {
var $areaToPrint = $($(this).data('print-me'));
var $hiddenAreas = $('.hide-print');
if ($areaToPrint.length) {
$hiddenAreas.hide();
$areaToPrint.show();
window.print();
$hiddenAreas.show();
}
});
})(jQuery);

但我无法在同一个pdf上打印多个具有不同ID的div。

Answer 1

我的猜测是你将要打印的元素的ID放入$(this).data('print-me')。这使得很难选择多个元素。

要实现您想要的效果，您应该为要打印的所有div分配一个类（即.printable）。这将允许你

var $areaToPrint = $('.printable');

并获得几个元素。其余代码将是相同的。

编辑我让您的代码在这里工作：https://jsfiddle.net/051nbtcL/2/

HTML

<div class="print-me">First Paragraph</div>
<div class="print-me">Second Paragraph</div>
<div class="hide-print">Always Hidden</div>

<button id="print" class="hide-print">Print</button>

重要细节：

$('.print-me').on('click', function () {
    $(this).toggleClass('hide-print');
});

单击可打印元素时，

将切换类hide-print。我使用CSS样式来轻松查看哪些元素具有此样式。

在button的点击处理程序中，我首先找到所有具有print-me类的元素，然后删除那些也有hide-print的元素，以确定是否有$('#print').on('click', function () { var $areaToPrint = $('.print-me').filter(function(index){ return !$(this).hasClass('hide-print'); }); var $hiddenAreas = $('.hide-print');什么都打印出来。

if()

在if ($areaToPrint.length) { $hiddenAreas.hide(); window.print(); $hiddenAreas.show(); }中，我只需要隐藏隐藏的元素（另一个是可见的并保持可见），打印和恢复：

{{1}}

如何在同一个pdf中同时打印多个div？

1 个答案: