window.print ()에서 머리글 및 바닥 글 제거
페이지 인쇄에 window.print ()를 사용하고 있지만 머리글과 바닥 글에 페이지 제목, 파일 경로, 페이지 번호 및 날짜가 포함되어 있습니다. 그들을 제거하는 방법?
인쇄 스타일 시트도 시도했습니다.
#header, #nav, .noprint
{
display: none;
}
도와주세요. 감사.
Chrome에서는 다음을 사용하여이 자동 머리글 / 바닥 글을 숨길 수 있습니다.
@page { margin: 0; }
내용이 페이지의 한계까지 확장되므로 페이지 인쇄 머리글 / 바닥 글이 없습니다. 물론이 경우 본문 요소에 여백 / 패딩을 설정하여 콘텐츠가 페이지 가장자리까지 확장되지 않도록해야합니다. 일반 프린터는 여백없는 인쇄를 얻을 수없고 원하는 것이 아닐 수 있으므로 다음과 같이 사용해야합니다.
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
으로 마틴 의견에서 지적, 페이지 경우 (큰 테이블 등의) 한 페이지 과거 스크롤, 여백이 무시됩니다 긴 요소를 가지고 인쇄 된 버전은 이상하게 보일 것이다.
이 답변의 원본 (2013 년 5 월) 당시에는 Chrome에서만 작동했으며 지금은 확실하지 않으며 다시 시도 할 필요가 없습니다. 제어 할 수없는 브라우저에 대한 지원이 필요한 경우 즉시 PDF를 만들어 인쇄 할 수 있지만 (자바 스크립트가 포함 된 자체 인쇄 PDF를 만들 수 있습니다), 이는 매우 번거로운 작업입니다.
Firefox :
moznomarginboxes속성 추가<html>
예 :
<html moznomarginboxes mozdisallowselectionprint>
이 코드를 CSS 파일에 추가하면 문제가 해결 될 것이라고 확신합니다.
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
오늘 제 동료도 같은 문제를 우연히 발견했습니다.
그러나 "margin : 0"솔루션은 크롬 기반 브라우저에서 작동하므로 Internet Explorer 는 @page 여백이 0으로 설정되어 있어도 바닥 글을 계속 인쇄합니다.
해결책은 (더 많은 해킹) @page에 마이너스 마진을 두는 것이 었습니다.
@page {margin:0 -6cm}
html {margin:0 6cm}
음의 여백은 Y 축에서는 작동하지 않으며 X에서만 작동합니다.
도움이되기를 바랍니다.
CSS 표준은 일부 고급 서식을 활성화합니다. CSS에는 페이지가있는 미디어 (예 : 종이)에만 적용되는 일부 형식을 활성화하는 @page 지시문이 있습니다. http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html을 참조 하십시오 .
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>파이어 폭스의 경우 사용
Firefox에서 https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (페이지 소스보기 :: 태그 HTML).
당신의 코드에서 교체 <html>로<html moznomarginboxes mozdisallowselectionprint>.
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
This will be the simplest solution. I tried most of the solutions in the internet but only this helped me.
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
you don't have to write any code. just before calling window.print() in the first time change the print settings of your browser. for example in firefox:
- Press Alt or F10 to see the menu bar
- Click on File, then Page Setup
- Select the tab Margins & Header/Footers
- Change URL for blank -> image
and one another example for IE (I'm using IE 11 for previous versions you can see this Prevent Firefox or Internet Explorer from Printing the URL on Every Page):
- Press Alt or F10 to see the menu bar
- Click on File, then Page Setup
- in Headers and Footers section Change URL for empty.
1.For Chrome & IE
<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
- For FireFox as l2aelba said,
Add moznomarginboxes attribute in Example :
<html moznomarginboxes mozdisallowselectionprint>
If you happen to scroll down to this point, I found a solution for Firefox. It will print contents from a specific div without the footers and headers. You can customize as you wish.
Firstly, download and install this addon : JSPrintSetup.
Secondly, write this function:
<script>
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(elem);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
//jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
jsPrintSetup.setSilentPrint(1);
//sent empty page header
jsPrintSetup.setOption('headerStrLeft', '');
jsPrintSetup.setOption('headerStrCenter', '');
jsPrintSetup.setOption('headerStrRight', '');
// set empty page footer
jsPrintSetup.setOption('footerStrLeft', '');
jsPrintSetup.setOption('footerStrCenter', '');
jsPrintSetup.setOption('footerStrRight', '');
// print my window silently.
jsPrintSetup.printWindow(mywindow);
jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog
mywindow.close();
return true;
}
</script>
Thirdly, In your code, wherever you want to write the print code, do this (I have used JQuery. You can use plain javascript):
<script>
$("#print").click(function () {
var contents = $("#yourDivToPrint").html();
PrintElem(contents);
})
</script>
Obviously, you need the link to click:
<a href="#" id="print">Print my Div</a>
And your div to print:
<div id="yourDivToPrint">....</div>
참고URL : https://stackoverflow.com/questions/8228088/remove-header-and-footer-from-window-print
'programing' 카테고리의 다른 글
| 병합 중에 Git이 항상 최신 버전을 선택하도록 강제 하시겠습니까? (0) | 2020.08.28 |
|---|---|
| Visual Studio 2008에서 프로젝트 구성을 제거하려면 어떻게합니까? (0) | 2020.08.28 |
| matplotlib의 보조 y 축에 y 축 레이블 추가 (0) | 2020.08.28 |
| 컨트롤러에서 JSON 렌더링 (0) | 2020.08.28 |
| 파이썬에서 빈 세트에 항목을 어떻게 추가 할 수 있습니까? (0) | 2020.08.28 |