[인쇄] 인쇄 설정

1. 인쇄 바닥글 고정

html

<header>(인쇄 반복 헤더)</header>

<table class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(인쇄 콘텐츠)

</td></tr></tbody><tfoot><tr><td>&nbsp;</td></tr></tfoot></table>

<footer>(인쇄 반복 바닥글)</footer>

css

@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}

출처 : https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document

 

1-1. 테이블 헤더, 푸터 고정(제목 행)

css

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

 

 

2. 인쇄 내부 요소 잘림 방지 css

page-break-inside : avoid -> break-inside : avoid로 바뀜

 

참고(page-break-inside) : https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

참고(break-inside) : https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

 

3. 기타 참고한 정리글

https://velog.io/@may54ther/%EB%82%B4%EA%B0%80-%ED%8E%B8%ED%95%98%EB%A0%A4%EA%B3%A0-%EC%A0%95%EB%A6%AC%ED%95%98%EB%8A%94-%EC%9D%B8%EC%87%84-%EA%B4%80%EB%A0%A8-CSS