182

ฉันได้เห็นคำถามนี้ถามในสองวิธีที่แตกต่างกันใน SO และเว็บไซต์อื่น ๆ แต่ส่วนใหญ่มีความเฉพาะเจาะจงเกินไปหรือล้าสมัย ฉันหวังว่าบางคนสามารถให้คำตอบที่ชัดเจนได้ที่นี่โดยไม่ต้องเปลี่ยนไปเก็งกำไร

มีวิธีอย่างใดอย่างหนึ่งกับ CSS หรือ javascript เพื่อเปลี่ยนการตั้งค่าเครื่องพิมพ์เริ่มต้นเมื่อมีคนพิมพ์ภายในเบราว์เซอร์ของพวกเขา และแน่นอนโดย "พิมพ์จากเบราว์เซอร์" ฉันหมายถึง HTML บางรูปแบบไม่ใช่ PDF หรือปลั๊กอิน mime-reliant ชนิดอื่น

โปรดทราบ:

หากเบราว์เซอร์บางตัวเสนอสิ่งนี้และอื่น ๆ ไม่มี (หรือถ้าคุณรู้วิธีการทำสำหรับเบราว์เซอร์บางตัวเท่านั้น) ฉันยินดีต้อนรับโซลูชันเฉพาะเบราว์เซอร์

ในทำนองเดียวกันหากคุณรู้จักเบราว์เซอร์กระแสหลักที่มีข้อ จำกัด เฉพาะกับการทำเช่นนี้สิ่งนี้ก็มีประโยชน์เช่นกัน แต่เอกสารบางอย่างที่เป็นปัจจุบันจะได้รับการชื่นชม (เพียงแค่พูดว่า "ขัดกับนโยบายความปลอดภัยของ XYZ" ไม่น่าเชื่อมากเมื่อ XYZ ทำการเปลี่ยนแปลงที่สำคัญในนโยบายดังกล่าวในช่วงสามปีที่ผ่านมา)

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

ฉันตระหนักดีว่า CSS มีตัวเลือกในการเปลี่ยนการวางแนวของหน้ารวมถึงระยะขอบของหน้า หนึ่งในหลาย ๆ การต่อสู้คือ Firefox ถ้าฉันตั้งค่าระยะขอบของหน้ากระดาษเป็น 1 นิ้วมันจะเพิ่มค่านี้เป็นครึ่งนิ้วที่มันถูกวางไว้แล้ว

ฉันต้องการลดการใช้ PDF ในเว็บไซต์ของลูกค้าของฉันมาก แต่การละเมิดการนำเสนอ (รวมถึงการขาดความน่าเชื่อถือ) เป็นปัญหาหลักของพวกเขา

— แอนโทนี่
แหล่งที่มา

มีเหตุผลเฉพาะใด ๆ ที่ทำให้คุณอยากทำเช่นนั้น? หากคุณพูดถึงความต้องการอาจเป็นไปได้ว่าจะมีวิธีแก้ไขปัญหาที่เป็นไปได้อีกอย่าง... สำหรับฉันการเปลี่ยนการตั้งค่าผู้ใช้ดูเหมือนว่าจะเป็นทางออกที่ดี ...

— Nivas

1

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

— Anthony

ฉันเห็นว่าคุณตรวจสอบคำตอบแล้วว่าเป็นวิธีแก้ปัญหา แต่ใช้ได้เฉพาะใน Chrome เท่านั้น คุณได้รับการแก้ไขข้ามเบราว์เซอร์ที่ถูกต้อง? หรืออย่างน้อยในเบราว์เซอร์บางอย่าง? เพราะฉันมีปัญหาเดียวกัน

— mavili

@mavili ดูstackoverflow.com/a/23778125/453605สำหรับโซลูชันข้ามเบราว์เซอร์

— Marcello Nuccio

200

มาตรฐาน CSS เปิดใช้งานการจัดรูปแบบขั้นสูงบางอย่าง มี@pageคำสั่งใน CSS ที่เปิดใช้งานการจัดรูปแบบบางอย่างที่ใช้เฉพาะกับสื่อบันทึกเพจ (เช่นกระดาษ) ดูhttp://www.w3.org/TR/1998/REC-CSS2-19980512/page.html

ข้อเสียคือพฤติกรรมในเบราว์เซอร์ที่แตกต่างกันนั้นไม่สอดคล้องกัน Safari ยังไม่สนับสนุนการตั้งค่าระยะขอบหน้ากระดาษเลย แต่เบราว์เซอร์หลักอื่น ๆ ทั้งหมดสนับสนุนในขณะนี้

ด้วย@pageคำสั่งคุณสามารถระบุระยะขอบของเครื่องพิมพ์ (ซึ่งไม่เหมือนกับขอบ CSS ปกติขององค์ประกอบ 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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

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

นี้ไม่ได้ทำงานในFirefox 3.6 , IE 7 , Safari 5.1.7หรือGoogle Chrome 4.1

การตั้งค่าขอบ @page จะมีผลบังคับใช้ในIE 8 , Opera 10 , Google Chrome 21และFirefox 19
แม้ว่าการตั้งค่าระยะขอบของหน้าจะถูกต้องสำหรับเนื้อหาของคุณในเบราว์เซอร์เหล่านี้ แต่พฤติกรรมนั้นไม่เหมาะอย่างยิ่งในการพยายามซ่อนการซ่อนของส่วนหัว / ท้ายกระดาษ

นี่คือลักษณะการทำงานในเบราว์เซอร์ที่แตกต่างกัน:

ในInternet Explorerระยะขอบถูกตั้งค่าเป็น 0 มม. ในการตั้งค่าสำหรับการพิมพ์นี้และถ้าคุณดูตัวอย่างคุณจะได้รับ 0 มม. เป็นค่าเริ่มต้น แต่ผู้ใช้สามารถเปลี่ยนได้ในการแสดงตัวอย่าง
คุณจะเห็นว่าเนื้อหาของหน้าเว็บนั้นอยู่ในตำแหน่งที่ถูกต้องจริงแต่ส่วนหัวพิมพ์และท้ายกระดาษของเบราว์เซอร์นั้นแสดงด้วยพื้นหลังที่ไม่โปร่งใสและซ่อนเนื้อหาของหน้าเว็บไว้ที่ตำแหน่งนั้นได้อย่างมีประสิทธิภาพ
ในFirefoxเวอร์ชันที่ใหม่กว่านั้นอยู่ในตำแหน่งที่ถูกต้อง แต่ข้อความส่วนหัว / ส่วนท้ายและข้อความเนื้อหาจะปรากฏขึ้นดังนั้นจึงดูเหมือนว่าข้อความเบราว์เซอร์ส่วนหัวและเนื้อหาหน้าเว็บของคุณผสมกันไม่ดี
ในOperaเนื้อหาหน้าจะซ่อนส่วนหัวเมื่อใช้พื้นหลังแบบไม่โปร่งใสใน css มาตรฐานและตำแหน่งส่วนหัว / ส่วนท้ายขัดแย้งกับเนื้อหา ค่อนข้างดี แต่ดูแปลก ๆ หากตั้งค่าระยะขอบไว้ที่ค่าเล็กน้อยซึ่งทำให้ส่วนหัวสามารถมองเห็นได้บางส่วน อีกทั้งตั้งค่าระยะขอบของหน้าไม่ถูกต้อง
ในChromeเวอร์ชันที่ใหม่กว่าส่วนหัวและส่วนท้ายของเบราว์เซอร์จะถูกซ่อนหากตั้ง @ margin ไว้เล็กมากจนตำแหน่งส่วนหัว / ส่วนท้ายขัดแย้งกับเนื้อหา ในความคิดของฉันนี่เป็นสิ่งที่ควรจะปฏิบัติ

ดังนั้นข้อสรุปคือChromeมีการใช้งานที่ดีที่สุดในการซ่อนส่วนหัว / ส่วนท้าย

— ความกลัว
แหล่งที่มา

1

เพื่อชี้แจงนี้ดูเหมือนจะไม่ลบส่วนหัวด้วย Firefox 21 หรือ IE10 ถึงแม้ว่าฉันสงสัยว่ามันทำให้ส่วนหัว / ส่วนท้ายไม่ใช้พื้นที่ ใช้งานได้กับ Chrome 28

— amh15

2

ฉันได้อัปเดตเพื่อแสดงเบราว์เซอร์เวอร์ชันใหม่กว่า Chrome มีการนำไปใช้ที่ดีที่สุด

— ความกลัว

@SearchForKnowledge: ใช่เป็นไปตามที่ฉันได้กล่าวไว้ - ถ้าคุณอ่านคำตอบของฉันภายใต้คำอธิบายว่ามันทำงานอย่างไรใน IE: "คุณจะเห็นว่าเนื้อหาของหน้าเว็บอยู่ในตำแหน่งที่ถูกต้องจริง แต่ส่วนหัวพิมพ์และท้ายกระดาษ เนื้อหาที่ตำแหน่งนั้น " ฉันบอกว่า "ไม่มีผล" ใน IE 8 ไม่ใช่ว่ามันจะทำงานเหมือนที่เราต้องการ ... ฉันจะแก้ไขคำตอบเพื่อให้ชัดเจนยิ่งขึ้น

— ความกลัว

ลบส่วนหัว แต่ยังรวม marign ซ้าย ตอนนี้ข้อความทั้งหมดของฉันอยู่ที่ขอบของหน้า

— Mittchel

7

การแก้ปัญหานี้ไม่ได้ผลเลยเพราะ@pageระยะขอบและbodyระยะขอบนั้นแตกต่างกันโดยพื้นฐาน: bodyระยะขอบจะใช้กับร่างกายทั้งหมดเช่นด้านบนของหน้าแรกและด้านล่างของหน้าสุดท้าย สำหรับหน้ากลางทั้งหมดด้านบน / ล่างจะยังคงมีระยะขอบเป็นศูนย์

— Konrad Rudolph

86

เวอร์ชันล่าสุดของ Chrome และ Opera รวมถึงFirefox 48 alpha 1 และสูงกว่า

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

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

ขยายตัวอย่างข้อมูล

สำหรับ Firefox เวอร์ชันสูงสุด 48 alpha 1

คุณสามารถเพิ่มแอmozNoMarginBoxesททริบิวให้กับ<html>แท็กเพื่อป้องกัน URL หมายเลขหน้าและสิ่งอื่น ๆ ที่ Firefox เพิ่มให้กับระยะขอบของหน้าไม่ให้พิมพ์

มันทำงานได้ใน Firefox 29 ขึ้นไป คุณสามารถดูภาพหน้าจอของความแตกต่างได้ที่นี่หรือดูตัวอย่างสด

โปรดทราบว่าmozDisallowSelectionPrintแอตทริบิวต์ในตัวอย่างไม่จำเป็นต้องลบข้อความออกจากระยะขอบ ดูแอตทริบิวต์ mozdisallowselectionprint ใน PDF.js ทำอะไรได้บ้าง .

เบราว์เซอร์อื่น ๆ

น่าเสียดายที่ดูเหมือนจะไม่มีวิธีแก้ไขปัญหานี้ใน Internet Explorer ดังนั้นคุณจะต้องหันไปใช้ PDF หรือขอให้ผู้ใช้ปิดการใช้งานข้อความขอบ

เช่นเดียวกับ Safari ตามความคิดเห็นโดย@Luiz Perezเวอร์ชันล่าสุดของ Safari (8, 9.1 และ 10) ยังคงไม่สนับสนุน @pageการระงับข้อความขอบ

ฉันไม่พบสิ่งใดบน Edge และไม่มีการติดตั้ง Windows 10 สำหรับทดสอบ

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

5

ตรงไปตรงมาฉันเห็นด้วยกับเรื่องนี้ สามารถใช้งานได้ใน Chrome หากคุณพิมพ์โดยใช้ "ระบบโต้ตอบ" เพียงตรวจสอบให้แน่ใจว่า<!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>มีการตั้งค่า ที่มา:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

— ปีเตอร์

3

ใช้งานได้ดีบน Firefox ดังนั้นสิ่งนี้พร้อมกับ @page{ size: auto; margin: 3mm; } การสนับสนุนโครเมี่ยมและซาฟารีจึงทำโซลูชันข้ามเบราว์เซอร์สำหรับฉัน

— Clain Dsilva

วิธีนี้ใช้ได้ผลดีสำหรับการลบข้อมูล / เนื้อหาที่ไม่ต้องการในสื่อสิ่งพิมพ์ใน FF ขอบคุณ!

— Varvara Jones

มันเยี่ยมมาก แต่แล้ว IE ล่ะ?

— Santosh

1

ฉันทดสอบตัวอย่างนี้ใน Safari 8, 9.1 และ 10 และไม่ได้ลบส่วนหัวหรือส่วนท้ายใน Safari เวอร์ชันเหล่านั้น

— Luis Perez

21

ดังที่ @Awe ได้กล่าวไปแล้วนี่เป็นวิธีแก้ปัญหาที่ได้รับการยืนยันว่าสามารถใช้งานได้ใน Chrome !!

ตรวจสอบให้แน่ใจว่านี่คือแท็กหัว:

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

— โรงงาน
แหล่งที่มา

3

นี่เป็นทางออกที่ดีมาก! ลบระยะขอบและลบส่วนหัวและส่วนท้าย การเปลี่ยนแปลงเพียงอย่างเดียวของฉันคือการเพิ่มpadding: 0.25in 0.5in;สไตล์ร่างกายเพื่อให้ฉันมีระยะขอบที่แน่นอนที่ฉันต้องการสำหรับการพิมพ์ที่ดีและสะอาด ทำงานกับ Chrome v25 และขอบคุณสำหรับโครงการนี้โดยเฉพาะเราสามารถขอให้ผู้ใช้ปลายทางเลือกเบราว์เซอร์ที่ทันสมัยสองสามตัว

— Charlie Schliesser

2

น่าเสียดายที่นี่ทำให้เกิดปัญหากับงานพิมพ์หลายหน้า ข้อความที่ด้านล่างของหน้าถูกตัด

— Jonathan

ทำงานได้อย่างสมบูรณ์บน Chrome 67.0.3396.99 และ Firefox 62.0b5 ด้วยการแสดงผลหน้าเดียว

— killscreen

16

ฉันมีคำขอที่คล้ายกันจากลูกค้าที่ต้องการลบส่วนหัวหมายเลขหน้าและส่วนท้าย html ในกรณีนี้ลูกค้ากำลังแสดงหน้า HTML ที่สามารถเป็นสองเท่าของใบรับรองอย่างเป็นทางการ URL หน้าและส่วนหัวที่เพิ่มเข้ามานั้นไม่เกี่ยวข้องและนำไปสู่ผลิตภัณฑ์ขั้นสุดท้ายที่น่าพอใจน้อยกว่า ในบางวิธีมันก็ดูราคาถูก

Media = Print ไม่สามารถปิดใช้งานค่าเริ่มต้นของเบราว์เซอร์เหล่านี้ได้ วิธีแก้ปัญหาเพียงอย่างเดียวคือบอกให้ผู้ใช้คลิกปุ่ม "เกียร์" และสลับการเปิด / ปิดรายการเหล่านั้น อย่างจริงจังฉันไม่รู้ว่าฉันสามารถทำสิ่งนี้ได้เป็นเวลา 20 ปี (และเราคิดว่าผู้ใช้ทั่วไปจะมีเบาะแสที่จะคลิกปุ่มสลับหรือไม่)

หาก CSS รองรับ Media = Print ควรสนับสนุนความสามารถในการควบคุมประสบการณ์การพิมพ์ของผู้ใช้ทั้งหมด ฉันขอขอบคุณเบราว์เซอร์ที่ให้ฟิลด์เพิ่มเติม แต่ทำไมไม่อนุญาตให้ CSS ควบคุมประสบการณ์การพิมพ์โดยรวม - ถ้านั่นคือสิ่งที่ต้องการ วิธีการแก้ปัญหา 90% อาจเป็น 100% กับอีกสามช่อง ง่าย ๆ :

#BrowserPrintDefaults{display:none}

จะพอเพียง

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

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

ในที่สุดฉันก็ยอมแพ้เท่าที่ฉันไม่ต้องการ ฉันเห็นด้วยอย่างแน่นอนว่าสิ่งนี้ควรปรากฏใน CSS เนื่องจากเบราว์เซอร์ทั้งหมดมีการตั้งค่าเหล่านี้และเป็นองค์ประกอบการนำเสนอ แต่นี่เป็นฉากที่เป็นการตั้งค่าระดับแอปพลิเคชันเช่นปิดคุกกี้

— Anthony

1

มันเป็นมาตรฐาน CSS อย่างเป็นทางการโดยใช้@Pageคำสั่งเพื่อกำหนดระยะขอบของเครื่องพิมพ์ (ซึ่งไม่เหมือนกับขอบของหน้า html) ขณะนี้เบราว์เซอร์หลักนี้ได้รับการสนับสนุนทั้งหมดยกเว้น Safari แต่มีผลอย่างไรต่อส่วนหัว / ส่วนท้ายแตกต่างกันไป การใช้งานที่ดีที่สุดคือใน Opera และ Chrome

— กลัว

6

ลองใช้รหัสนี้ใช้งานได้ 100% สำหรับฉัน:
สำหรับ แนวนอน:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

สำหรับ Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

— ใช่แล้ว
แหล่งที่มา

1

กฎของหน้า CSS จะกำหนดระยะขอบ แต่อย่าลบส่วนหัวและส่วนท้ายที่มีอยู่แล้วภายในโดยเบราว์เซอร์ (URL หน้าหมายเลขหน้า ฯลฯ )

— Anthony

0

ตั้งแต่ที่คุณกล่าวถึง "ในเบราว์เซอร์ของพวกเขา" และ Firefox ถ้าคุณกำลังใช้ Internet Explorer คุณสามารถปิดการใช้งานส่วนหัวของหน้า / ท้ายโดยชั่วคราวการตั้งค่าของค่าในรีจิสทรีให้ดูที่นี่เช่น AFAIK ฉันไม่เคยได้ยินวิธีการนี้ในเบราว์เซอร์อื่น ทั้งคำตอบของ Daniel และ Mickel ดูเหมือนว่าจะขัดแย้งกันฉันเดาว่าอาจมีการตั้งค่าที่คล้ายกันในรีจิสทรีสำหรับ Firefox เพื่อลบส่วนหัว / ท้ายกระดาษหรือปรับแต่งพวกเขา คุณได้ตรวจสอบมันออกมา?

หวังว่านี่จะช่วยและสุขสันต์วันหยุดขอแสดงความนับถือทอม

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

1

ใน IE7 + คุณสามารถปิดการใช้งานส่วนหัว / ส่วนท้ายด้วยการคลิกปุ่มอย่างง่ายในตัวอย่างก่อนพิมพ์ ไม่จำเป็นต้องทำในรีจิสทรี!

— ความกลัว

0

@ อัตรากำไรขั้นต้นหน้า: 0 มม. ทำงานใน Firefox 19.0a2 (2012-12-07)

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

0

ฉันแก้ไขปัญหาของฉันโดยใช้ CSS บางอย่างลงในหน้าเว็บ

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

— Kabir Hossain
แหล่งที่มา

0

สิ่งนี้ใช้ได้กับฉันด้วยระยะขอบประมาณ1 ซม

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

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

ปิดใช้งานตัวเลือกการพิมพ์ของเบราว์เซอร์ (ส่วนหัวส่วนท้ายระยะห่าง) จากหน้าเว็บหรือไม่

นี่คือลักษณะการทำงานในเบราว์เซอร์ที่แตกต่างกัน:

เวอร์ชันล่าสุดของ Chrome และ Opera รวมถึงFirefox 48 alpha 1 และสูงกว่า

สำหรับ Firefox เวอร์ชันสูงสุด 48 alpha 1

เบราว์เซอร์อื่น ๆ