Question

我有一个用Bootstrap制作的动态页面，我需要能够打印这个动态页面。

我正在使用媒体查询来设置页面样式：

/** Custom Print Styles **/
@media print {
    header,
    .menu,
    footer {
        display: none;
    }

    ...
    ...
    ...
}

我测试了打印，不知怎的，如果我有多个页面，我会遇到问题，如果它只包含几行，则不会打印最后一页。当我向第一页添加一些随机文本以向整个文档添加一些行时，问题就消失了，这意味着在最后一页中将有更多行要打印。

这是我的打印脚本：

$("body").on("click", ".btn-print", function() {
    window.print();
});

我也尝试使用 Ctrl + P 打印文档，但同样存在问题。

Answer 1

我通过这样做解决了这个问题：

@media print {
    body, h1, h2, h3, ol, ul, div, span, p {
        display: block !important;
        width: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    ...
    ...
}

打印Bootstrap网页正在被切断

1 个答案: