Question

我有一个项目，我需要打印多页面考试。
我希望每页都有边框，但在底部和顶部，当分页时，边框也会断开！

我正在使用@media print来设置打印页面的样式页面的代码结构是：

header
main-content{
--- div for each question
}

每个问题都有一个边框底部，主要内容有一个完整的边框
那么关于谁能实现这一目标的任何想法？

注意：我知道break-after或break-before属性，在这种情况下它们没有用

Answer 1

不确定为什么要在打印页面下方留下该空间。当您打印页面时，如果每个打印页面的底部都有灰色边框，那么它看起来会非常糟糕。将边框放在屏幕上并在打印时删除边框是有意义的。

我会说你可以让底部边框变粗。

@media print{
  .main-content{
     border-bottom 5px solid grey;
  }
}

要么是这样，要么使背景颜色像图片上的灰色一样，并在主要内容div下方添加边距以使页面彼此间隔开。

请记住，背景颜色和边框颜色并不总是出现在打印上。这取决于浏览器和打印机设置。

Answer 2

找到解决方案：
我使用javascript将问题添加到自定义页面中。然后我打印了这些页面。

$(document).ready(function () {
var pageIndex = 1;
var $questions = $(".question");
var $header = $("#mainHeader");
var $printPage = $("#toPrint");
var page = "<div class='page'>";
var pageHeight = 0;
const firstPageHeight = 1350; //Pixels
const otherPagesHeight = 1800; //Pixels

function resetPage() {
    page+= "</div>";
    $printPage.append(page);
    page = "<div class='page'>";
    pageIndex++;//Go to the next Page
    pageHeight = 0; //Reset the page
}

function addQuestion(that) {
    page += "<div class='question'>" + $(that).html() + "</div>";
}

$printPage.append("<div id='printHeader'>" + $header.html() + "</div>" ); //Adding the header

$.each($questions, function () {
    //First page with header
        var currentPageHeight = pageIndex == 1 ? firstPageHeight : otherPagesHeight;
        if ($(this).height() + pageHeight < currentPageHeight){
            addQuestion(this);
            pageHeight += $(this).height();
        }else{
            //This page does not have the space for this question, so we move to the next page
            //But first we need to close the previous page
            resetPage();
            pageHeight += $(this).height();
            addQuestion(this);
        }


    //The page is full, we finish it
    if (pageHeight >= currentPageHeight)
        resetPage();

});

$(".q-space").show();

});

希望这有助于某人...

打印时为每个页面添加边框，没有任何边框中断

2 个答案: