วิธีการสร้างหน้า HTML ในหน้าขนาดกระดาษ A4?

388

เป็นไปได้ไหมที่หน้า HTML จะทำงานเช่นหน้า A4 ใน MS Word?

โดยพื้นฐานแล้วฉันต้องการที่จะแสดงหน้า HTML ในเบราว์เซอร์และร่างเนื้อหาในขนาดของหน้าขนาด A4

เพื่อความเรียบง่ายฉันสมมติว่าหน้า HTML จะมีเฉพาะข้อความ (ไม่มีรูปภาพ ฯลฯ ) และจะไม่มี<br>แท็ก

นอกจากนี้เมื่อพิมพ์หน้า HTML มันจะออกมาเป็นหน้ากระดาษขนาด A4

html  css  printing 
— Zabba
แหล่งที่มา
12
คุณสามารถ: github.com/delight-im/HTML-Sheets-of-Paper
— caw
คู่หูที่เป็นไปได้ของ: stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
— Mark Boulder
1
จริง "HTML สำหรับพิมพ์"เป็น comig! ดูประวัติทั้งหมดได้ที่stackoverflow.com/q/10641667/287948และโมดูลการกระจายตัวของCSS ระดับ 3ของ W3C ที่กำลังจะมา!
— Peter Krauss
ความตั้งใจที่จะทำเช่นนั้นคืออะไร? กำลังจะออกจาก MS Office สำหรับเทคโนโลยีเว็บหรือไม่? อย่างน้อยที่สิ่งที่ฉันพยายาม แต่ยังคงต้องมีการป้อนข้อมูลวิธี ตอบว่าจะจบเรื่องที่เกิดขึ้นจากคำถามนี้
— Stefan

คำตอบ:

318

ย้อนหลังไปเมื่อเดือนพฤศจิกายน 2548 AlistApart.com ตีพิมพ์บทความเกี่ยวกับวิธีที่พวกเขาตีพิมพ์หนังสือโดยไม่ใช้อะไรนอกจาก HTML และ CSS ดู: http://alistapart.com/article/boom

นี่คือข้อความที่ตัดตอนมาจากบทความ:

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

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

มีผู้เผยแพร่ในสหรัฐอเมริกาเราได้รับขนาดหน้าเป็นนิ้ว เราในฐานะชาวยุโรปยังคงวัดต่อไป CSS ยอมรับทั้งสองอย่าง

หลังจากตั้งค่าขนาดหน้ากระดาษและระยะขอบเราจำเป็นต้องตรวจสอบให้แน่ใจว่ามีตัวแบ่งหน้าในตำแหน่งที่ถูกต้อง ข้อความที่ตัดตอนมาต่อไปนี้แสดงวิธีสร้างตัวแบ่งหน้าหลังจากบทและภาคผนวก:

div.chapter, div.appendix {
    page-break-after: always;
}

นอกจากนี้เรายังใช้ CSS2 เพื่อประกาศหน้าชื่อ:

div.titlepage {
  page: blank;
}

กล่าวคือจะต้องพิมพ์หน้าชื่อเรื่องบนหน้าที่มีชื่อ“ ว่าง” CSS2 อธิบายแนวคิดของเพจที่มีชื่อ แต่ค่าของเพจนั้นจะปรากฏเมื่อมีส่วนหัวและส่วนท้ายเท่านั้น

อย่างไรก็ตาม…

เนื่องจากคุณต้องการพิมพ์ A4 คุณจะต้องมีขนาดที่แตกต่างกัน:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

บทความกระโดดลงไปในสิ่งต่าง ๆ เช่นการตั้งค่าตัวแบ่งหน้า ฯลฯ ดังนั้นคุณอาจต้องการอ่านอย่างสมบูรณ์

ในกรณีของคุณเคล็ดลับคือการสร้าง CSS พิมพ์ก่อน เบราว์เซอร์สมัยใหม่ส่วนใหญ่ (> 2005) รองรับการซูมและจะสามารถแสดงเว็บไซต์ตาม CSS การพิมพ์ได้

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

แก้ไข (26-02-2015)

วันนี้ฉันบังเอิญเจอบทความล่าสุดอีกฉบับที่ SmashingMagazineซึ่งดำน้ำในการออกแบบเพื่อการพิมพ์ด้วย HTML และ CSS ... ในกรณีที่คุณสามารถใช้แบบฝึกหัดอื่นได้

แก้ไข (30-10-2018)

มันมาถึงความสนใจของฉันในที่sizeไม่ถูกต้อง CSS3 ซึ่งถูกต้องแน่นอน - ฉันเพิ่งทำซ้ำรหัสที่ยกมาในบทความที่ (ตามที่ระบุไว้) เป็น CSS2 เก่าที่ดี (ซึ่งทำให้รู้สึกเมื่อคุณดูปีบทความและ คำตอบนี้ถูกเผยแพร่ครั้งแรก) อย่างไรก็ตามนี่คือรหัส CSS3 ที่ถูกต้องเพื่อความสะดวกในการคัดลอกและวางของคุณ:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

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

  • 72 dpi (เว็บ) = 595 X 842 พิกเซล
  • 300 dpi (พิมพ์) = 2480 X 3508 พิกเซล
  • 600 dpi (งานพิมพ์คุณภาพสูง) = 4960 X 7016 พิกเซล

กระนั้นฉันก็จะหลีกเลี่ยงความยุ่งยากและใช้cm(เซนติเมตร) หรือmm(มิลลิเมตร) ในการกำหนดขนาดเพื่อหลีกเลี่ยงการแสดงผลบกพร่องที่อาจเกิดขึ้นขึ้นอยู่กับลูกค้าที่คุณใช้

— E-ซูชิ
แหล่งที่มา
1
ขอขอบคุณที่อัปเดตคำตอบนี้เพื่อให้ตรงกับมาตรฐานปัจจุบัน!
— jumps4fun
โอเค แต่จำนวน px
— A.com
@ A.com ไม่มี px ที่จะขึ้นอยู่กับ DPI ... ซึ่งเป็นสาเหตุที่ CSS สนับสนุนหน่วยการวัดที่ชัดเจนเหล่านี้เรียกว่าcmet al ฉันแนะนำให้คุณอ่านบทความที่เชื่อมโยงและ / หรืออย่างน้อยคำตอบของฉัน การทำเช่นนั้นคุณจะสังเกตเห็นคำถามของคุณจริง ๆ แล้วมันไม่สมเหตุสมผล นอกจากนี้คุณอาจต้องการโพสต์คำถามของคุณเป็นคำถามใหม่หากสิ่งยังไม่ชัดเจน นี่คือเว็บไซต์ถาม - ตอบไม่ใช่ฟอรัม \ o /
— e-sushi
67

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

สมมติว่าจอภาพของคุณแสดง 72 dpi คุณสามารถเพิ่มสิ่งนี้:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
— ทิมแมกนามารา
แหล่งที่มา
19
การปฏิบัติตามคำแนะนำของคณบดี Will (ซึ่งสมเหตุสมผลดี) โดยใช้มิลลิเมตรคุณสามารถบังคับให้เบราว์เซอร์คำนวณความกว้าง / ความสูงของพิกเซล: เนื้อหา {ความสูง: 420 มม.; ความกว้าง: 297 มม.; ... }
— Tim McNamara
49
ขนาด A4 คือ 210x297 มม.
— fouronnes
8
ดังนั้นในที่สุดจึงเป็นภาพบุคคล DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
— daVe
1
เสร็จสิ้นยุติธรรมบิตของการทำงานในตอนนี้และในขณะที่ 210x297 มิติเป็นสิ่งที่ดีที่พวกเขาไม่ควรได้รับการพิจารณาแน่นอนเหมาะสำหรับหน้า A4 การทดสอบที่ดีคือการพิมพ์ -> PDF โดยตรงจาก Chrome และเลื่อนนิ้วหัวแม่มือของหน้าตัวอย่าง แม้ว่าจะไม่มีการตั้งค่าระยะขอบไว้ แต่ความสูงทั้งหมดจะต้องลดลงเพื่อหลีกเลี่ยงการล้น -> ที่ทำให้หน้าเลขคู่ทั้งหมดเป็นหน้าเปล่า
— cbmtrx
จะเป็นอย่างไรถ้าเรามีเนื้อหาแบบไดนามิกซึ่งอาจเป็นหน้าเว็บ 3-4 หน้าขึ้นไป
— jazzbpn
36

ขนาด A4 คือ210x297 มม

ดังนั้นคุณสามารถตั้งค่าหน้า HTML ให้พอดีกับขนาดเหล่านั้นด้วย CSS:

html,body{
    height:297mm;
    width:210mm;
}
— zurfyx
แหล่งที่มา
จะเป็นอย่างไรถ้าเรามีเนื้อหาแบบไดนามิกซึ่งอาจเป็นหน้าเว็บ 3-4 หน้าขึ้นไป
— jazzbpn
24

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

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

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

Size : 8.27in and 11.69 inches

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

หรือ

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
— พ่ออับดุล
แหล่งที่มา
คุณแน่ใจเหรอ ฉันไม่สามารถทำซ้ำได้ใน Firefox และ Chrome ล่าสุด
— Dan7
ใช่ส่วนใหญ่ฉันกำลังพัฒนาสำหรับ Chrome ... ทำงานได้ดีกับฉัน
— Pir Abdul
3
ฉันไม่สามารถ@page Section1ทำงานกับ Chrome 41.0.2272.77 ได้ คุณแน่ใจจริงๆหรือว่าคำตอบของคุณใช้งานได้จริง? ลองเช่นไปที่data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>และเปิดตัวอย่างก่อนพิมพ์ ฉันไม่เห็นความแตกต่างระหว่างสิ่งdata:text/html,xนั้นกับ เมื่อฉันแทนที่@page xด้วย@pageก็ใช้งานได้ แต่นั่นไม่ใช่ตัวเลือกเฉพาะหน้าเว็บ
— Rob W
สำหรับผู้ที่ไม่คุ้นเคยกับการใส่ CSS ลงในเอกสาร (ในขณะที่ฉันกำลังเขียน) คุณใส่รหัสนี้ในแท็ก <style> </style> จากนั้นเรียก div (เช่น <div class = page> Stuff </ div > <div class = page> เนื้อหาเพิ่มเติม </div>) โดยที่ "เนื้อหา" และ "เนื้อหาเพิ่มเติม" คือเนื้อหาที่จะอยู่ในหน้าเดียว
— mkingsbu
16

ฉันใช้ HTML เพื่อสร้างรายงานที่พิมพ์ออกมาอย่างถูกต้องในขนาดจริงบนกระดาษจริง

หากคุณใช้ mm เป็นหน่วยอย่างระมัดระวังในไฟล์ CSS คุณควรตกลงอย่างน้อยสำหรับหน้าเดียว ผู้คนสามารถทำให้คุณหงุดหงิดด้วยการเปลี่ยนการซูมในเบราว์เซอร์

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

— คณบดีจะ
แหล่งที่มา
14

ฉันเห็นโซลูชันนี้หลังจากค้นหาที่ google แล้วค้นหา "เทมเพลตหน้า A4 CSS" (codepen.io) มันแสดงพื้นที่ขนาด A4 (A3, A5, แนวตั้ง) ในเบราว์เซอร์โดยใช้แท็ก <page> ภายในแท็กนี้เนื้อหาจะถูกแสดง แต่ตำแหน่งที่แน่นอนยังอยู่ในส่วนของเบราว์เซอร์

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>
ขยายตัวอย่างข้อมูล

สิ่งนี้ใช้ได้กับฉันโดยไม่ต้องรวม css / js-library อื่น ๆ ใช้งานได้กับเบราว์เซอร์ปัจจุบัน (IE, FF, Chrome)

— Cas Knook
แหล่งที่มา
การใช้ตัวอย่างนี้กับ FF 53.0.3 และการวางหน้าแนวนอนสองหน้าหลังจากที่อีกอันหนึ่งไม่ทำงาน ดูดีในมุมมองปกติ แต่เมื่อเลือกตัวอย่างก่อนพิมพ์จะขยายเป็น 3 หน้า
— lofihelsinki
ไม่ได้ตั้งใจลากวัวเก่าออกจากคูน้ำ แต่ฉันเชื่อว่าเงาควรจะเป็นbox-shadow: none;และไม่ใช่ 0
— NoobishPro
มันทำงานให้ฉันและฉันต้องเปลี่ยนความสูง
— Jomal Johny
จะเป็นอย่างไรถ้าเรามีเนื้อหาแบบไดนามิกซึ่งอาจเป็นหน้าเว็บ 3-4 หน้าขึ้นไป
— jazzbpn
11 
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

ในปกติของคุณstyle.css:

table.tableclassname {
  width: 400px;
}

ในprint.css:

table.tableclassname {
  width: 16 cm;
}
— จาค็อบ
แหล่งที่มา
10

PPI และ DPI สร้างความแตกต่างอย่างมากกับวิธีที่เอกสารจะพิมพ์ออกจากเบราว์เซอร์ เครื่องพิมพ์ไม่มีข้อมูลบนจุดพิทช์หน้าจอหรือ DPI ของภาพ ฯลฯ หากคุณกำลังพิมพ์ภาพพวกเขาจะพิมพ์ในขนาดที่ใกล้เคียงกับสัดส่วนที่แสดงบนหน้าจอ หน่วยประมวลผลการพิมพ์ของเบราว์เซอร์จะเพิ่ม DPI ของภาพจากสิ่งที่ค่อนข้างต่ำเช่น 72dpi ไปเป็น DPI ส่วนที่เหลือของเอกสาร สมมติว่าภาพแสดงความกว้างครึ่งหน้าจากนั้นจะมีความกว้างประมาณ 4 นิ้วความกว้างพิกเซลของภาพจะอยู่ที่ประมาณ 300px เพื่อแสดงอย่างถูกต้องในเบราว์เซอร์เมื่อถึงเวลาพิมพ์ที่ 300DPI หน่วยประมวลผลก็เพิ่มพิกเซล และภาพจะโตประมาณ 1200px ที่ 300 DPI คือ 4 "

เมื่อกล่าวถึงองค์ประกอบแบบเวกเตอร์หรือไม่ใช่พิกเซลเช่นข้อความเครื่องพิมพ์จะเลือก DPI ของตัวเองจากไดรเวอร์ซึ่งไม่เกี่ยวข้องกับจุดหน้าจอหรือความกว้างของเบราว์เซอร์ ฯลฯ หากเบราว์เซอร์มีความกว้าง 3000px ตัวประมวลผลการพิมพ์จะตัดข้อความตามความเหมาะสม

นี่คือสิ่งที่ทำให้การสร้างการแสดงผลเป็นเรื่องยาก: แต่ละเบราว์เซอร์และเครื่องพิมพ์จะตีความขนาดตัวอักษร (pt, em, px) และระยะห่างในแบบของตัวเอง ขึ้นอยู่กับเครื่องพิมพ์เบราว์เซอร์และแม้แต่ระบบปฏิบัติการที่คุณใช้คุณจะได้รับจำนวนบรรทัดและอักขระที่แตกต่างกันต่อหน้า ดังนั้นแม้ว่าคุณจะทดสอบคอมพิวเตอร์โดยใช้เบราว์เซอร์และเครื่องพิมพ์ของคุณและหาว่าคุณสามารถแสดงข้อความในกล่องที่ 640x900px และสมบูรณ์แบบในการพิมพ์ผู้ชายคนถัดไปที่พยายามพิมพ์อาจจะพิมพ์ต่างออกไป ไม่มีวิธีบังคับเครื่องพิมพ์และเบราว์เซอร์แต่ละเครื่องให้เหมือนกันทุกครั้ง

ลืมพิกเซลและ moreso ลืม DPI สิ่งเดียวที่คุณสามารถใช้พิกเซลได้คือการตั้งค่าความกว้างของตารางที่จำลองความกว้างของพื้นที่ที่พิมพ์ได้บนเครื่องพิมพ์ของคุณ ในกรณีนี้ฉันพบว่าความกว้าง 640px ใกล้เคียง

— Quintin Humphreys
แหล่งที่มา
อ่านหลาย ๆ หน้าและทุกคนแนะนำว่าการเพิ่ม DPI จะทำให้ขนาดเล็กลงเมื่อพิมพ์ (3000px / 300dpi = 10 นิ้ว) แต่เมื่อพิมพ์จากเบราว์เซอร์โครมของฉัน 600 DPI และ 1200 DPI นำไปสู่ขนาดที่แน่นอนบนกระดาษ สับสนจริงๆจนกระทั่งฉันอ่านสิ่งนี้!
— วัง Sheng
10

กำลังมองหาปัญหาที่คล้ายกันฉันพบนี้ - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 เป็นรูปแบบเอกสารเนื่องจากภาพหน้าจอที่จะขึ้นอยู่กับความละเอียดของภาพเช่นเอกสาร A4 ที่ปรับขนาดเป็น:

  • 72 dpi (เว็บ) = 595 X 842 พิกเซล
  • 300 dpi (พิมพ์) = 2480 X 3508 พิกเซล (นี่คือ "A4" เท่าที่ฉันรู้นั่นคือ "210mm X 297mm @ 300 dpi")
  • 600 dpi (พิมพ์) = 4960 X 7016 พิกเซล
— วอยเบดนาร์สกี
แหล่งที่มา
8

ฉันรู้ว่าหัวข้อนี้ค่อนข้างเก่า แต่ฉันต้องการแบ่งปันประสบการณ์เกี่ยวกับหัวข้อนั้น ที่จริงแล้วฉันค้นหาโมดูลที่สามารถช่วยฉันรายงานประจำวันของฉันได้ ฉันกำลังเขียนเอกสารและรายงานบางส่วนใน HTML + CSS (แทนที่จะเป็น Word, Latex, OO, ... ) objectif จะพิมพ์ลงบนกระดาษ A4 เพื่อแบ่งปันกับเพื่อน ๆ ... แทนที่จะค้นหาฉันตัดสินใจที่จะมีเซสชั่นการเข้ารหัสเล็ก ๆ ที่ตลกเพื่อใช้ lib ง่าย ๆ ที่สามารถจัดการ "หน้า" หมายเลขหน้าสรุปส่วนหัว ท้ายที่สุด .... ในที่สุดฉันก็ทำมันใน ~~ 2h และฉันรู้ว่านั่นไม่ใช่เครื่องมือที่ดีที่สุดเท่าที่เคยมีมา แต่มันก็เกือบจะเป็นไปตามวัตถุประสงค์ของฉัน คุณสามารถดูโครงการนี้ใน repo ของฉันและอย่าลังเลที่จะแบ่งปันความคิดของคุณ อาจไม่ใช่สิ่งที่คุณกำลังค้นหาที่ 100% แต่ฉันคิดว่าโมดูลนี้สามารถช่วยคุณได้

โดยทั่วไปฉันสร้างหน้าของร่างกาย "width: 200mm;" และภาชนะที่มีความสูง: 290 มม. (เล็กกว่า A4) จากนั้นฉันก็ใช้การแบ่งหน้า - หลัง: เสมอ ดังนั้นตัวเลือก "พิมพ์" ของเบราว์เซอร์จึงรู้ว่าจะแบ่งหน้าเมื่อใด

repo: https://github.com/kursion/jsprint

— มีเหตุมีผล Yves
แหล่งที่มา
6

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

แต่ฉันขอแนะนำให้สร้าง PDF ตามเนื้อหาบนหน้าจอและให้บริการ PDF สำหรับการดาวน์โหลดและ / หรือการพิมพ์ แม้ว่าจะมีการจ่ายห้องสมุด PDF ที่มีให้ใช้งานได้ส่วนใหญ่แต่ก็มีทางเลือกฟรีสองสามทางสำหรับการสร้าง PDF พื้นฐาน

— Prutswonder
แหล่งที่มา
5

ฉันใช้680pxในรายงานเชิงพาณิชย์เพื่อพิมพ์บนหน้า A4 ตั้งแต่ปี 1998 700px ไม่สามารถพอดีกับขนาดของระยะขอบได้อย่างถูกต้อง เบราว์เซอร์ที่ทันสมัยสามารถย่อขนาดหน้าให้พอดีกับเครื่องพิมพ์ แต่ถ้าคุณใช้ 680 พิกเซลคุณจะพิมพ์ได้อย่างถูกต้องในเกือบทุกเบราว์เซอร์

นั่นคือ HTML สำหรับคุณเรียกใช้ข้อมูลโค้ดและดูผลลัพธ์:

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>
ขยายตัวอย่างข้อมูล

JSFiddle:

https://jsfiddle.net/ajofmm7r/

— lynx_74
แหล่งที่มา
ความสูงสำหรับเต็มหน้าใน px คืออะไร
— khaverim
3

เป็นไปได้ทั้งหมดที่จะตั้งค่าเลย์เอาต์ของคุณเพื่อให้ได้สัดส่วนของหน้า a4 คุณจะต้องตั้งค่าความกว้างและความสูงตามนั้น (อาจตรวจสอบด้วยwindow.innerHeightและwindow.innerWidthถึงแม้ว่าฉันไม่แน่ใจว่าเชื่อถือได้หรือไม่)

ส่วนที่ยุ่งยากคือการพิมพ์ A4 ตัวอย่างเช่นจาวาสคริปต์รองรับการพิมพ์หน้าอย่างไม่สุภาพด้วย window.printวิธีการ ตามที่ @Prutswonder แนะนำให้สร้างPDFจากหน้าเว็บอาจเป็นวิธีที่ซับซ้อนที่สุดในการทำเช่นนี้ (นอกเหนือจากการจัดหาเอกสาร PDF ในตอนแรก) อย่างไรก็ตามสิ่งนี้ไม่สำคัญเหมือนอย่างที่คิด นี่คือการเชื่อมโยงที่มีรายละเอียดของแหล่งที่มาทั้งหมดที่เปิดชั้นเรียน Java เพื่อสร้างไฟล์ PDF จาก HTML A: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html

เห็นได้ชัดว่าเมื่อคุณสร้าง PDF ที่มีการพิมพ์สัดส่วน A4 แล้วจะส่งผลให้การพิมพ์หน้า A4 ของคุณสะอาด การลงทุนครั้งนี้จะคุ้มค่าหรือไม่

— FK82
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.