打印由 ajax 加载的羽毛灯箱的内容答案

【问题标题】：Printing contents of a featherlight lightbox which are loaded by ajax打印由 ajax 加载的羽毛灯箱的内容
【发布时间】：2019-02-15 10:51:28
【问题描述】：

引导程序 3.3.6
jquery 1.12.3
Featherlight1.7.9

我的网页包含许多这样的锚点：

<a href="/ajax/training/{url_title}" data-featherlight="ajax" class="btn btn-sm btn-bw">More info</a>

当用户单击“更多信息”锚点时，它会打开一个 Featherlight 灯箱并通过 ajax 调用填充内容。

灯箱内的标记相当简单。它包含一个“打印此页面”按钮，用于打印灯箱内的内容：

<div class="ajax-training">
    <h3>Foo</h3>
    <p>Bar</p>
</div>

<div class="text-center">
     <button onclick="printWindow()" class="btn btn-primary">Print this page</button>
</div>

灯箱里面有一些js来处理printWindow()：

<script>
function printWindow() {
    window.print();
}
</script>

还有一些 CSS 可以避免打印“打印此页面”和 Featherlight“关闭”按钮：

<style media="print">
.btn, .featherlight-close-icon {
    display: none;
}
</style>

这在填充灯箱、触发打印功能和避免打印按钮方面工作正常。

但是...如果页面内容超过 1 页，它只会打印第一页。这发生在不同的浏览器和不同的机器上，并且以一致的方式运行。

我不明白为什么会发生这种情况，因为我没有添加任何可以实现这种情况的 CSS。为什么在第一页之后就被截断了？

这是单击“打印此页”后它在打印预览中的显示方式。我特意设置了内容的长度，使得它需要 3 页 A4 纸。它只会打印第 1 页，如果我尝试输入超过 1 的页数（即 2、3、2-3），则会出现错误提示：

页面引用超出范围，限制为 1

我已经提到我正在使用 Bootstrap，以防有一些冲突或原因会导致这种行为。没有针对media print 或等效的应用程序特定的CSS。唯一针对 .ajax-training（内容所在的位置）的 CSS 是设置标题样式并添加一些填充：

.ajax-training {
    padding: 10px; 
}
.ajax-training h3 {
    font-weight: bold;
    color: #022169; 
}

屏幕截图显示选中了“双面”框；勾选和不勾选都试过了，没什么区别。

【问题讨论】：

标签： jquery html css printing featherlight

【解决方案1】：

要加载用于打印的 CSS，您必须指定整个文件专门用于打印，或者代码的一部分用于通过媒体查询进行打印。以下两种解决方案的示例：

整个文件：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

媒体查询：

@media print {
    background: red;
}

因此，对您而言，只需创建一个指向引导程序的重复链接并将 media="print" 添加到其中即可：)

【讨论】：