jquery - 打印由 ajax 加载的羽毛灯箱的内容
问题描述
- 引导程序 3.3.6
- jQuery 1.12.3
- 羽光1.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;
}
屏幕截图显示选中了“双面”框;我已经在选中和未选中的情况下尝试过它,它没有任何区别。
解决方案
要加载用于打印的 CSS,您必须指定整个文件专门用于打印,或者代码的一部分用于使用媒体查询进行打印。以下两种解决方案的示例:
整个文件:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
媒体查询:
@media print {
background: red;
}
因此,对您而言,只需创建一个指向引导程序的重复链接并将 media="print" 添加到其中即可:)
推荐阅读
- python - 如何按行将列表转换为 DataFrame
- microservices - SaaS 和微服务的数据库模式
- angular - 性能:使用@Input 和 getter/setter 的两种方式数据绑定
- jquery - 渲染响应不适用于 jquery ajax 请求
- php - 如何在 HEREDOC SQL 查询中使用 PHP 变量?
- java - Seq2Seq 模型 (DL4J) 做出荒谬的预测
- debugging - 在 VSCode 中触发扩展命令时,我如何知道执行了代码的哪一部分?
- azure - 无法访问 Azure 文件共享 | 端口 445
- firebase - Firestore 实时更新或 Sockets.io 用于实时聊天
- unity3d - Animator SetFloat(int 0) as Transition,现在是为了防止循环?