ระยะขอบขณะพิมพ์หน้า html

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

ขอบคุณ

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

body
{
  margin: 25mm 25mm 25mm 25mm;
}

สำหรับขนาดตัวอักษรให้ใช้ ptสำหรับสื่อสิ่งพิมพ์

โปรดทราบว่าการตั้งค่าระยะขอบในรูปแบบ css จะไม่ปรับระยะขอบในไดรเวอร์เครื่องพิมพ์ที่กำหนดพื้นที่ที่สามารถพิมพ์ได้ของเครื่องพิมพ์หรือส่วนต่างที่ควบคุมโดยเบราว์เซอร์ (อาจปรับได้ในตัวอย่างก่อนพิมพ์ในเบราว์เซอร์บางรุ่น) ... จะตั้งค่าระยะขอบบนเอกสารภายในพื้นที่ที่สามารถพิมพ์ได้

นอกจากนี้คุณยังควรทราบว่า IE7 ++ จะปรับขนาดให้พอดีกับที่ดีที่สุดและเป็นสาเหตุที่ทำให้ทุกอย่างเพื่อจะผิดแม้ว่าคุณจะใช้หรือcm mmในการแก้ไขพฤติกรรมนี้ผู้ใช้จะต้องเลือก 'ตัวอย่างก่อนพิมพ์' จากนั้นตั้งค่าขนาดการพิมพ์เป็น100%(ค่าเริ่มต้นคือShrink To Fit)

ตัวเลือกที่ดีกว่าสำหรับการควบคุมเต็มขอบที่พิมพ์ออกมาคือการใช้@pageคำสั่งเพื่อกำหนดระยะขอบกระดาษซึ่งจะส่งผลต่อระยะขอบบนกระดาษนอกองค์ประกอบร่างกาย html ซึ่งโดยปกติจะถูกควบคุมโดยเบราว์เซอร์ ดูhttp://www.w3.org/TR/1998/REC-CSS2-19980512/page.html
ปัจจุบันสามารถใช้งานได้กับเบราว์เซอร์หลักทั้งหมดยกเว้น Safari
ใน Internet explorer ระยะขอบจะถูกตั้งค่าเป็นค่านี้ในการตั้งค่าสำหรับการพิมพ์นี้และหากคุณดูภาพตัวอย่างคุณจะได้รับสิ่งนี้เป็นค่าเริ่มต้น แต่ผู้ใช้สามารถเปลี่ยนได้ในหน้าตัวอย่าง

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

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

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

คำตอบจากคำถามนี้แนะนำ:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

อย่างไรก็ตามฉันลงเอยด้วยการใช้ CSS นี้เพื่อให้ทุกหน้าของฉันจะพิมพ์:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

กรณีพิเศษ: โต๊ะยาว

เมื่อฉันต้องการพิมพ์ตารางบนหลาย ๆ หน้าสิ่งmargin:0ที่@pageอยู่ภายในนั้นทำให้ขอบเลือดออก:

ฉันสามารถแก้ปัญหานี้ด้วยคำตอบนี้ด้วย:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

รวมทั้งการตั้งค่าระยะขอบบนสุดสำหรับ@page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

ผลลัพธ์:

ฉันต้องการโซลูชันที่กระชับและใช้งานได้กับเบราว์เซอร์ทั้งหมด สำหรับตอนนี้ฉันหวังว่าข้อมูลข้างต้นจะช่วยให้นักพัฒนาซอฟต์แวร์บางคนมีปัญหาที่คล้ายกัน

อัปเดตโซลูชันง่ายๆ

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

โซลูชั่นเก่า

สร้างส่วนที่มีแต่ละหน้าและใช้รหัสด้านล่างเพื่อปรับระยะขอบความสูงและความกว้าง

หากคุณกำลังพิมพ์ขนาด A4

จากนั้นผู้ใช้

ขนาด: 8.27 นิ้วและ 11.69 นิ้ว

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

จากนั้นสร้าง div ด้วยเนื้อหาทั้งหมดของคุณ

<div class="Section1"> 
    type your content here... 
</div>

pxฉันเองแนะนำให้ใช้หน่วยที่แตกต่างกันของการวัดกว่า ฉันไม่คิดว่าพิกเซลมีความเกี่ยวข้องมากนักในแง่ของการพิมพ์ นึกคิดคุณจะใช้:

• จุด (pt)
• เซนติเมตร (ซม.)

ฉันแน่ใจว่ามีคนอื่น ๆ และหนึ่งบทความดี ๆ เกี่ยวกับการพิมพ์ CSS สามารถพบได้ที่นี่: จะพิมพ์โดยเอริคเมเยอร์

ฉันยังแนะนำ pt กับ cm หรือ mm เนื่องจากแม่นยำยิ่งขึ้น นอกจากนี้ฉันไม่สามารถรับ @page ให้ทำงานใน Chrome ได้ (รุ่น 30.0.1599.69 m) มันไม่สนใจสิ่งที่ฉันวางไว้สำหรับระยะขอบไม่ว่าจะเล็กหรือใหญ่ แต่คุณสามารถทำให้มันทำงานกับระยะขอบของร่างกายในเอกสารแปลก ๆ

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