경계선없이 인쇄 할 때 각 페이지에 테두리 추가

Question

프로젝트가 있으므로 다중 페이지 시험을 인쇄해야합니다.
각 페이지마다 테두리를 만들고 싶지만 하단과 상단에서 페이지가 끊기면 테두리가 끊어집니다!

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

각 질문에 테두리 바닥을 가지고 있으며, 주요 컨텐츠는 전체 테두리가 : 나는 페이지의 인쇄 페이지
코드 구조 스타일을 @media print을 사용하고

SCREENSHOT OF AN EXAMPLE

입니다
그래서이 목표를 달성 할 수있는 사람은 누구입니까?

참고 : 나는 휴식 - 후 또는 휴식 - 전에 속성을 알고, 당신은 인쇄에 페이지 아래에 그 공간을 원하는 것이 왜이 경우

Answer 1

확실하지 않음에 아무 소용이있어 없습니다. 페이지를 인쇄 할 때 각 인쇄 된 페이지의 하단에 회색 경계선이 있으면 정말 안 좋을 것입니다. 경계선을 화면에 놓고 인쇄 할 때 테두리를 제거하는 것이 좋습니다.

나는 아래쪽 테두리를 더 두껍게 만들 수 있다고 말하고 싶습니다.

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

어느 쪽이든을, 또는 배경 색상 회색 그림에서와 같이하고 공간으로 메인 컨텐츠 사업부 아래에 각각의 페이지 여백을 추가 할 수 있습니다.

배경색과 테두리 색이 항상 인쇄 상 나타나는 것은 아닙니다. 브라우저 및 프린터 설정에 따라 다릅니다.

Answer 2

해결책을 찾았습니다 :
나는 자바 스크립트를 사용하여 사용자 정의 페이지에 질문을 추가했습니다. 그런 다음 그 페이지를 인쇄했습니다. 이 사람하는 데 도움이

$(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(); 

}); 

희망 ...