Xóa đầu trang và chân trang khỏi window.print ()

109

Tôi đang sử dụng window.print () để in trang, nhưng tôi có đầu trang và chân trang chứa tiêu đề trang, đường dẫn tệp, số trang và ngày tháng. Làm thế nào để loại bỏ chúng?

Tôi cũng đã thử in bảng định kiểu.

#header, #nav, .noprint
{
display: none;
}

Xin vui lòng giúp đỡ. Cảm ơn.

css  printing 
— Viralk
nguồn
7
Các yếu tố đó dành riêng cho cài đặt trình duyệt của người dùng. Tôi không nghĩ rằng bạn sẽ có thể xóa chúng thông qua CSS hoặc JavaScript.
— Michael Berkowski
Tôi nghĩ câu hỏi này cần được làm rõ: Bạn đang cố gắng xóa các phần tử đầu trang và chân trang của HTML hiển thị trên màn hình hay bạn muốn loại bỏ các đầu trang và chân trang được thêm vào bởi hàm in?
— AlanObject

Câu trả lời:

149

Trong Chrome, bạn có thể ẩn đầu trang / chân trang tự động này bằng cách sử dụng

@page { margin: 0; }

Vì nội dung sẽ mở rộng đến giới hạn của trang, đầu trang / chân trang in trang sẽ không có. Tất nhiên, trong trường hợp này, bạn nên đặt một số lề / khoảng đệm trong phần tử nội dung của mình để nội dung không kéo dài đến tận mép của trang. Vì các máy in thông thường không thể in không có lề và nó có thể không phải là những gì bạn muốn, bạn nên sử dụng một cái gì đó như sau:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Như Martin đã chỉ ra trong một nhận xét, nếu trang có phần tử dài cuộn qua một trang (như một bảng lớn), lề sẽ bị bỏ qua và phiên bản in sẽ trông kỳ lạ.

Tại thời điểm ban đầu của câu trả lời này (tháng 5 năm 2013), nó chỉ hoạt động trên Chrome, không chắc chắn về nó bây giờ, không bao giờ cần phải thử lại. Nếu bạn cần hỗ trợ cho một trình duyệt không thể hoạt động, bạn có thể tạo tệp PDF ngay lập tức và in tệp đó (bạn có thể tạo tệp PDF tự in nhúng JavaScript trên đó), nhưng đó là một sự phức tạp lớn.

— diego nunes
nguồn
2
Vì lý do nào đó, tôi body { margin: 1.6cm; }đã bỏ qua lề bên phải (có lẽ vì tôi đang sử dụng text-align:right), vì vậy thay vào đó tôi tạo một lề cho <div class="container">nội dung của mình và sử dụng .container { margin: 1.6cm; }thay thế.
— rybo111
8
Tôi đang thử điều này với Chrome 33. Nó hoạt động tốt, nhưng hãy cẩn thận, bởi vì body { margin: 1.6cm; }- vì nó là lề cho toàn bộ tài liệu - sẽ không tôn trọng lề dọc cho các tài liệu nhiều trang, ngoại trừ trang đầu tiên và cuối cùng. Đáng buồn thay, tôi không thể nghĩ ra cách giải quyết khác.
— pau.moreno
Xin chào @Diego, tôi rất vui với đề xuất của bạn và chân trang đầu trang của tôi đã bị xóa nhưng trang in của tôi đã tăng lên. "body {margin: 1.6cm;}" chỉ thay đổi 1.6cm đến 1.0cm và nó đang làm việc .. :) Chúc mừng codding
— Vishal Kiri
3
Có một câu trả lời mở rộng hơn ở đây: stackoverflow.com/questions/1960939/…
— jedison
Xóa lề trang và thêm lề nội dung đã tạo ra một trang trống cho tôi. Tôi đã thay đổi lề cơ thể thành đệm và nó hoạt động.
— André Guimarães Sakata
21

Tôi chắc chắn Thêm mã này vào tệp css của bạn sẽ giải quyết được vấn đề

<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>

Bạn có thể truy cập trang này để biết thêm về điều này

— Rudias
nguồn
3
Không. Nó không hoạt động. Nó đang đặt lợi nhuận đó là nó. Nó vẫn hiển thị url và ngày giờ trên đầu trang và chân trang
— Người học
Hoạt động cho Chrome và Firefox, nhưng không hoạt động với IE 11.
— Sammi
21

Firefox:

  • Thêm moznomarginboxesthuộc tính vào<html>

Thí dụ :

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
nguồn
6
Điều này sẽ không hoạt động nữa sau khi Firefox 48 được phát hành (tháng 8 năm 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
— Aljullu
nó không hoạt động với tôi, FF 61, nhưng @page {margin: 0; } giải pháp dường như cũng hoạt động trong FF.
— Kiko
11

Hôm nay đồng nghiệp của tôi tình cờ gặp vấn đề tương tự.

Tuy nhiên, vì giải pháp "margin: 0" hoạt động cho các trình duyệt dựa trên chromium, Internet Explorer tiếp tục in chân trang ngay cả khi lề @page được đặt thành 0.

Giải pháp (nhiều hơn là hack) là đặt lợi nhuận âm trên @page.

@page {margin:0 -6cm}
html {margin:0 6cm}

Xin lưu ý rằng lợi nhuận âm sẽ không hoạt động cho trục Y, chỉ cho X

Hy vọng nó giúp.

— Nick Panov
nguồn
8

Chuẩn CSS cho phép một số định dạng nâng cao. Có một chỉ thị @page trong CSS cho phép một số định dạng chỉ áp dụng cho phương tiện được phân trang (như giấy). Xem 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>
Mở rộng đoạn mã

và cho firefox sử dụng nó

Trong Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (xem nguồn trang :: thẻ HTML).

Trong mã của bạn, hãy thay thế <html>bằng<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
nguồn
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— Sheak Abdulla
nguồn
Đây có vẻ là cách thích hợp để làm điều đó. Ngay cả trong trường hợp của tôi vào ngữ cảnh iframe, nó hoạt động rất tốt.
— TwystO
2

Đây sẽ là giải pháp đơn giản nhất. Tôi đã thử hầu hết các giải pháp trên internet nhưng chỉ điều này mới giúp được tôi.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
nguồn
11
Điều này không làm gì cả.
— đêm
1

@page { margin: 0; }hoạt động tốt trong Chrome và Firefox. Tôi chưa tìm ra cách sửa lỗi IE thông qua css. Nhưng bạn có thể vào Cài đặt Trang trong IE trên máy của riêng bạn tại và đặt lề thành 0. Nhấn alt rồi nhấn menu tệp ở góc trên cùng bên trái và bạn sẽ tìm thấy Cài đặt Trang. Điều này chỉ hoạt động cho một máy tại một thời điểm ...

— Sammi
nguồn
0

1. Đối với Chrome và 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>
  1. Đối với FireFox như l2aelba đã nói ,

Thêm thuộc tính moznomarginboxes trong Ví dụ:

<html moznomarginboxes mozdisallowselectionprint>
— Nikhilus
nguồn
Trong đoạn mã trên, <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> là tùy chọn .
— Nikhilus
0

Tôi đang cố gắng xóa đầu trang và chân trang của trang html mà tôi đã in theo cách thủ công.

Không có giải pháp nào trên trang này phù hợp với tôi mà chỉ đơn giản bằng cách xác định chân trang của riêng tôi như được giải thích ở đây Firefox sẽ không thêm đầu trang và chân trang của riêng mình.

Rất tiếc, điều này không hoạt động trên Chrome.

Trong CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Thêm cái này vào HTML của bạn:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
nguồn
-1

Nếu bạn tình cờ cuộn xuống thời điểm này, tôi đã tìm thấy giải pháp cho Firefox. Nó sẽ in nội dung từ một div cụ thể mà không có chân trang và đầu trang. Bạn có thể tùy chỉnh theo ý muốn.

Đầu tiên, tải xuống và cài đặt addon này: JSPrintSetup .

Thứ hai, viết hàm này: 

<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>

Thứ ba, Trong mã của bạn, bất cứ nơi nào bạn muốn viết mã in, hãy làm điều này (Tôi đã sử dụng JQuery. Bạn có thể sử dụng javascript thuần túy):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Rõ ràng, bạn cần liên kết để nhấp vào:

<a href="#" id="print">Print my Div</a>

Và div của bạn để in:

<div id="yourDivToPrint">....</div>
— Josiah
nguồn
-3

bạn không phải viết bất kỳ mã nào. ngay trước khi gọi window.print () trong lần đầu tiên thay đổi cài đặt in của trình duyệt của bạn. ví dụ trong firefox:

  1. Nhấn Alt hoặc F10 để xem thanh menu
  2. Nhấp vào Tệp, sau đó nhấp vào Thiết lập Trang
  3. Chọn tab Lề & Đầu trang / Chân trang
  4. Thay đổi URL cho trống -> hình ảnh

và một ví dụ khác cho IE (Tôi đang sử dụng IE 11 cho các phiên bản trước, bạn có thể thấy điều này Ngăn Firefox hoặc Internet Explorer In URL trên Mọi Trang ):

  1. Nhấn Alt hoặc F10 để xem thanh menu
  2. Nhấp vào Tệp, sau đó nhấp vào Thiết lập Trang
  3. trong phần Đầu trang và Chân trang Thay đổi URL cho trống.
— alireza azami
nguồn
Mặc dù liên kết này có thể trả lời câu hỏi, nhưng tốt hơn hết bạn nên đưa các phần thiết yếu của câu trả lời vào đây và cung cấp liên kết để tham khảo. Các câu trả lời chỉ có liên kết có thể trở nên không hợp lệ nếu trang được liên kết thay đổi. - Từ xét
— SurvivalMachine
cảm ơn cho lời đề nghị SurvivalMachine. Tôi thay đổi nội dung câu trả lời của tôi một vài phút trước :)
— alireza azami
Hmmm ... Tôi không thích phải chạy xung quanh tất cả người dùng của mình và cập nhật trình duyệt của họ (tuy nhiên nhiều người dùng họ sử dụng) để tính đến một ứng dụng này, đặc biệt nếu họ sống ở bên kia hành tinh. Ngoài ra, nếu họ cần cài đặt lại cho một ứng dụng khác thì sao? Đây không phải là một câu trả lời.
— Paul
Cách tiếp cận này thiếu chức năng trình duyệt chéo mà một tính năng được đưa vào trang / ứng dụng sẽ cung cấp.
— killscreen
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.