ลบส่วนหัวและส่วนท้ายออกจาก window.print ()

109

ฉันใช้ window.print () สำหรับการพิมพ์หน้า แต่ฉันได้รับส่วนหัวและส่วนท้ายมีชื่อหน้าเส้นทางไฟล์หมายเลขหน้าและวันที่ จะลบออกได้อย่างไร?

ฉันลองพิมพ์สไตล์ชีตด้วย

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

กรุณาช่วย. ขอบคุณ.

css printing

— Viralk
แหล่งที่มา

7

องค์ประกอบเหล่านี้เฉพาะสำหรับการตั้งค่าเบราว์เซอร์ของผู้ใช้ ฉันไม่คิดว่าคุณจะสามารถลบออกผ่าน CSS หรือ JavaScript

— Michael Berkowski

ฉันคิดว่าคำถามนี้ต้องการคำชี้แจง: คุณกำลังพยายามลบองค์ประกอบส่วนหัวและส่วนท้ายของ HTML ที่แสดงบนหน้าจอหรือคุณต้องการกำจัดส่วนหัวและส่วนท้ายที่เพิ่มโดยฟังก์ชันการพิมพ์หรือไม่?

— AlanObject

149

ใน Chrome คุณสามารถซ่อนส่วนหัว / ส่วนท้ายอัตโนมัตินี้ได้โดยใช้

@page { margin: 0; }

เนื่องจากเนื้อหาจะขยายไปถึงขีด จำกัด ของหน้าส่วนหัว / ส่วนท้ายของการพิมพ์หน้าจะขาดไป แน่นอนว่าในกรณีนี้คุณควรกำหนดระยะขอบ / การพายในองค์ประกอบร่างกายของคุณเพื่อไม่ให้เนื้อหาขยายไปจนสุดขอบของหน้า เนื่องจากเครื่องพิมพ์ทั่วไปไม่สามารถพิมพ์แบบไม่มีขอบและอาจไม่ใช่สิ่งที่คุณต้องการคุณควรใช้สิ่งนี้:

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

ดังที่มาร์ตินชี้ให้เห็นในความคิดเห็นหากหน้าเว็บมีองค์ประกอบยาวที่เลื่อนผ่านหน้าหนึ่งหน้า (เช่นตารางขนาดใหญ่) ขอบจะถูกละเว้นและเวอร์ชันที่พิมพ์ออกมาจะดูแปลก ๆ

ในเวลาเดิมของคำตอบนี้ (พฤษภาคม 2013) มันใช้ได้เฉพาะบน Chrome เท่านั้นไม่แน่ใจในตอนนี้ไม่จำเป็นต้องลองอีกครั้ง หากคุณต้องการการสนับสนุนสำหรับเบราว์เซอร์ที่ไม่สามารถใช้งานได้คุณสามารถสร้าง PDF ได้ทันทีและพิมพ์ได้ (คุณสามารถสร้างไฟล์ PDF ที่พิมพ์ด้วยตัวเองโดยฝัง JavaScript ไว้) แต่นั่นเป็นเรื่องยุ่งยากมาก

— แม่ชีดิเอโก
แหล่งที่มา

2

ด้วยเหตุผลบางอย่างฉันbody { margin: 1.6cm; }ไม่สนใจระยะขอบที่เหมาะสมสำหรับฉัน (อาจเป็นเพราะฉันกำลังใช้งานอยู่text-align:right) ดังนั้นฉันจึงสร้าง<div class="container">เนื้อหาสำหรับเนื้อหาของฉันและใช้.container { margin: 1.6cm; }แทน

— rybo111

8

ฉันกำลังลองกับ Chrome 33 มันใช้งานได้ดี แต่โปรดระวังเพราะbody { margin: 1.6cm; }- เนื่องจากเป็นระยะขอบสำหรับทั้งเอกสาร - จะไม่เคารพระยะขอบแนวตั้งสำหรับเอกสารหลายหน้ายกเว้นหน้าแรกและหน้าสุดท้าย น่าเศร้าที่ฉันคิดวิธีแก้ปัญหาไม่ได้

— pau.moreno

เฮ้ @Diego ฉันพอใจกับข้อเสนอแนะของคุณและส่วนท้ายส่วนหัวของฉันถูกลบออก แต่หน้าพิมพ์ของฉันเพิ่ม "body {margin: 1.6cm;}" เพียงแค่เปลี่ยน 1.6cm เป็น 1.0cm ก็ใช้งานได้แล้ว .. :) Happy codding

— Vishal Kiri

3

มีคำตอบเพิ่มเติมที่นี่: stackoverflow.com/questions/1960939/…

— jedison

การลบระยะขอบหน้าและการเพิ่มระยะขอบของเนื้อหาเป็นการสร้างหน้าว่างสำหรับฉัน ฉันเปลี่ยนระยะขอบของร่างกายเป็นช่องว่างภายในและใช้งานได้

— AndréGuimarães Sakata

21

ฉันแน่ใจว่าการเพิ่มรหัสนี้ในไฟล์ 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>

คุณสามารถไปที่นี่เพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้

— Rudias
แหล่งที่มา

4

ไม่มันใช้งานไม่ได้ มันคือการกำหนดระยะขอบนั่นเอง มันยังคงแสดง url และวันเวลาที่ส่วนหัวและส่วนท้าย

— ผู้เรียน

ใช้ได้กับ Chrome และ Firefox แต่ไม่ใช่ IE 11

— Sammi

21

Firefox:

เพิ่มmoznomarginboxesแอตทริบิวต์ใน<html>

ตัวอย่าง:

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
แหล่งที่มา

6

สิ่งนี้จะไม่ทำงานอีกต่อไปหลังจาก Firefox 48 เปิดตัว (สิงหาคม 2559): bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

มันใช้ไม่ได้สำหรับฉัน FF 61 แต่ @page {margin: 0; } ดูเหมือนว่าจะใช้งานได้ใน FF เช่นกัน

— Kiko

11

วันนี้เพื่อนร่วมงานของฉันสะดุดกับปัญหาเดียวกัน

เนื่องจากโซลูชัน "margin: 0" ใช้งานได้กับเบราว์เซอร์ที่ใช้โครเมียมInternet Explorerจะพิมพ์ส่วนท้ายต่อไปแม้ว่าระยะขอบ @ หน้าจะถูกตั้งค่าเป็นศูนย์ก็ตาม

วิธีแก้ปัญหา (แฮ็กมากกว่า) คือใส่ขอบลบในหน้า @

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

โปรดทราบว่าระยะขอบติดลบจะใช้ไม่ได้กับแกน Y สำหรับ X เท่านั้น

หวังว่าจะช่วยได้

— Nick Panov
แหล่งที่มา

8

มาตรฐาน CSS ช่วยให้สามารถจัดรูปแบบขั้นสูงได้ มีคำสั่ง @page ใน CSS ที่เปิดใช้งานการจัดรูปแบบบางอย่างที่ใช้กับสื่อเพจเท่านั้น (เช่นกระดาษ) ดู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 ใช้มัน

ใน Firefox https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (ดูแหล่งที่มาของหน้า :: แท็ก HTML)

ในรหัสของคุณให้แทนที่<html>ด้วย<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
แหล่งที่มา

4

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

— เชคอับดุลลา
แหล่งที่มา

นี่เป็นวิธีที่เหมาะสมที่จะทำ แม้ว่าในกรณีของฉันจะเป็นบริบท iframe แต่ก็ใช้งานได้ดี

— TwystO

2

นี่จะเป็นทางออกที่ง่ายที่สุด ฉันลองใช้วิธีแก้ปัญหาส่วนใหญ่ในอินเทอร์เน็ต แต่มีเพียงสิ่งนี้เท่านั้นที่ช่วยฉันได้

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}

— ยโสธะ
แหล่งที่มา

11

สิ่งนี้ไม่ได้ทำอะไรเลย

— คืน

1

@page { margin: 0; }ทำงานได้ดีใน Chrome และ Firefox ฉันไม่พบวิธีแก้ไข IE ผ่าน css แต่คุณสามารถเข้าไปที่ Page Setup ใน IE บนเครื่องของคุณเองได้ที่และตั้งค่าระยะขอบเป็น 0 กด alt จากนั้นเมนูไฟล์ที่มุมบนซ้ายคุณจะพบ Page Setup ใช้งานได้ครั้งละหนึ่งเครื่องเท่านั้น ...

— แซมมี่
แหล่งที่มา

0

1. สำหรับ 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>

สำหรับ FireFox ตามที่ l2aelba กล่าวไว้

เพิ่มแอตทริบิวต์ moznomarginboxes ในตัวอย่าง:

<html moznomarginboxes mozdisallowselectionprint>

— นิชิลัส
แหล่งที่มา

ในโค้ดด้านบน <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> เป็นทางเลือก .

— Nikhilus

0

ฉันพยายามลบส่วนหัวและส่วนท้ายของหน้า html ที่ฉันพิมพ์ด้วยตนเอง

ไม่มีวิธีแก้ปัญหาในหน้านี้สำหรับฉัน แต่เพียงแค่กำหนดส่วนท้ายของฉันเองตามที่อธิบายไว้ที่นี่ Firefox จะไม่เพิ่มส่วนหัวและส่วนท้ายของตัวเอง

ขออภัยสิ่งนี้ใช้ไม่ได้กับ Chrome

ใน CSS:

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

เพิ่มสิ่งนี้ใน HTML ของคุณ:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``

— นกกระเรียน
แหล่งที่มา

-1

หากคุณเลื่อนลงมาจนถึงจุดนี้ฉันพบวิธีแก้ปัญหาสำหรับ Firefox มันจะพิมพ์เนื้อหาจาก div เฉพาะโดยไม่มีส่วนท้ายและส่วนหัว คุณสามารถปรับแต่งได้ตามที่คุณต้องการ

ประการแรกดาวน์โหลดและติดตั้ง addon นี้: JSPrintSetup

ประการที่สองเขียนฟังก์ชันนี้:

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

ประการที่สามในโค้ดของคุณทุกที่ที่คุณต้องการเขียนโค้ดพิมพ์ให้ทำสิ่งนี้ (ฉันใช้ JQuery คุณสามารถใช้จาวาสคริปต์ธรรมดา):

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

แน่นอนคุณต้องมีลิงค์เพื่อคลิก:

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

และ div ของคุณที่จะพิมพ์:

<div id="yourDivToPrint">....</div>

— Josiah
แหล่งที่มา

-3

คุณไม่ต้องเขียนโค้ดใด ๆ ก่อนที่จะเรียก window.print () ในครั้งแรกให้เปลี่ยนการตั้งค่าการพิมพ์ของเบราว์เซอร์ของคุณ ตัวอย่างเช่นใน firefox:

กด Alt หรือ F10 เพื่อดูแถบเมนู
คลิกที่ไฟล์แล้วคลิกการตั้งค่าหน้า
เลือกแท็บระยะขอบและส่วนหัว / ท้ายกระดาษ
เปลี่ยน URL สำหรับภาพว่าง ->

และอีกตัวอย่างหนึ่งสำหรับ IE (ฉันใช้ IE 11 สำหรับเวอร์ชันก่อนหน้าคุณจะเห็นสิ่งนี้ป้องกัน Firefox หรือ Internet Explorer ไม่ให้พิมพ์ URL ในทุก ๆ หน้า ):

กด Alt หรือ F10 เพื่อดูแถบเมนู
คลิกที่ไฟล์แล้วคลิกการตั้งค่าหน้า
ในส่วนหัวและส่วนท้ายเปลี่ยน URL ให้ว่างเปล่า

— alireza azami
แหล่งที่มา

แม้ว่าลิงก์นี้อาจตอบคำถามได้ แต่ควรรวมส่วนสำคัญของคำตอบไว้ที่นี่และระบุลิงก์เพื่อการอ้างอิง คำตอบแบบลิงก์เท่านั้นอาจไม่ถูกต้องหากหน้าที่เชื่อมโยงเปลี่ยนไป - จากรีวิว

— SurvivalMachine

ขอบคุณสำหรับคำแนะนำ SurvivalMachine ฉันแก้ไขคำตอบเมื่อไม่กี่นาทีก่อน :)

— alireza azami

อืม ... ฉันไม่คิดว่าจะต้องวิ่งไปรอบ ๆ ผู้ใช้ทั้งหมดของฉันและอัปเดตเบราว์เซอร์ของพวกเขา (ไม่ว่าพวกเขาจะใช้หลายตัว) เพื่อพิจารณาแอปนี้โดยเฉพาะอย่างยิ่งหากพวกเขาอาศัยอยู่อีกฟากหนึ่งของโลก นอกจากนี้จะเกิดอะไรขึ้นหากพวกเขาต้องการการตั้งค่าสำหรับแอปอื่น นี่ไม่ใช่คำตอบ

— พอล

วิธีนี้ไม่มีฟังก์ชันการทำงานข้ามเบราว์เซอร์ที่คุณลักษณะที่รวมอยู่ในหน้า / แอปจะมีให้

— killscreen