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

【问题标题】：Add border to each page when printing without any border breaks打印时为每页添加边框，没有任何边框中断
【发布时间】：2017-11-17 18:40:46
【问题描述】：

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

SCREENSHOT OF AN EXAMPLE

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

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

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

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

【问题讨论】：

标签： html css printing stylesheet printing-web-page

【解决方案1】：

不知道为什么要在印刷品的页面下方留出空间。打印页面时，如果每个打印页面的底部都有灰色边框，它看起来会非常糟糕。将边框放在屏幕上并在打印时移除边框是有意义的。

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

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

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

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

【讨论】：

【解决方案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();

});

希望这对某人有所帮助...

【讨论】：