การแบ่งหน้าการพิมพ์ของ Google Chrome

110

ฉันกำลังพยายามให้ Google Chrome ทำการแบ่งหน้า

ฉันได้รับแจ้งผ่านเว็บไซต์หลายแห่งที่page-break-after: always;ใช้ได้ใน chrome แต่ดูเหมือนว่าฉันจะไม่สามารถใช้งานได้แม้จะเป็นตัวอย่างง่ายๆก็ตาม มีวิธีบังคับให้หน้าแตกเมื่อพิมพ์ใน chrome หรือไม่

css printing google-chrome

— ไมค์วัลสตาร์
แหล่งที่มา

ดูเหมือนว่าจะมีการพูดคุยกันเมื่อเร็ว ๆ นี้ (กุมภาพันธ์ 2014) (ในตั๋วข้อผิดพลาดเก่าปี 2005) บนตัวติดตามข้อผิดพลาดของ webkit bugs.webkit.org/show_bug.cgi?id=5097

— Alex KeySmith

134

ฉันใช้แนวทางต่อไปนี้สำเร็จแล้วในเบราว์เซอร์หลัก ๆ ทั้งหมดรวมถึง Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

นี่คือตัวอย่างที่เรียบง่าย ในโค้ดจริง div แต่ละหน้าประกอบด้วยองค์ประกอบอื่น ๆ อีกมากมาย

— ฟิลรอส
แหล่งที่มา

4

ฉันเห็นปัญหาของฉันฉันคิดว่า ฉันพยายามใช้กับแท็ก <br/>

— Mike Valstar

@ ไมค์ขอบคุณที่ตอบปัญหาให้ฉัน ไม่แน่ใจว่าทำไม br ถึงใช้ไม่ได้และ div ทำ แต่ถึงกระนั้นก็เปลี่ยนได้ง่าย

— Jeff Davis

วิธีนี้ใช้ได้ผลเมื่อคุณพยายามใช้กับเพจหลัก แต่ไม่ได้ผลเมื่อคุณพิมพ์จาก iframe (แน่นอนใน chrome)

— VJ

อ่านคำตอบของ @ peter ด้านล่าง position: relativeนอกจากนี้เขายังมีจุดที่ดีเกี่ยวกับ

— สงสัย 1ejack

6

ตามข้อมูลจำเพาะbreak-afterและbreak-beforeใช้เฉพาะกับblock-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - นั่นหมายความว่าไม่มีการลอยตัวหรือเทคนิคการกำหนดตำแหน่งที่สวยงาม

— Mikko Rantalainen

35

จริงๆแล้วมีรายละเอียดหนึ่งหายไปจากคำตอบที่เลือกว่ายอมรับ (จาก Phil Ross) ....

มันใช้งานได้ใน Chrome และการแก้ปัญหาก็โง่จริงๆ!!

ทั้งพาเรนต์และองค์ประกอบที่คุณต้องการควบคุมการแบ่งหน้าจะต้องถูกประกาศว่า:

position: relative

ตรวจสอบซอนี้: http://jsfiddle.net/petersphilo/QCvA5/5/show/

สิ่งนี้เป็นจริงสำหรับ:

page-break-before
page-break-after
page-break-inside

อย่างไรก็ตามการควบคุม page-break-inside ใน Safari ไม่ทำงาน (ใน 5.1.7 เป็นอย่างน้อย)

ฉันหวังว่านี่จะช่วยได้!!!

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

-webkit-region-break-inside: avoid;

ดูซอนี้: http://jsfiddle.net/petersphilo/QCvA5/23/show

ดังนั้นฉันเดาว่าเราต้องเพิ่มตอนนี้ ...

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

— ปีเตอร์
แหล่งที่มา

ขึ้นอยู่กับเวอร์ชันของ WebKit ที่ใช้ว่าใช้งานได้หรือไม่ใน Chrome คุณเองบอกว่ามันใช้ไม่ได้ใน Safari 5.1.7 ดังนั้นฉันไม่คิดว่ามันโง่เลย เวอร์ชันของ WK ในสิ่งที่ทดสอบอาจแตกต่างจากที่คุณทดสอบ

— Joel Peltonen

หน้านั้นใช้ไม่ได้ใน Chrome 26.0.1410.65 ฉันได้รับ 3 หน้าและหน้าสุดท้ายมีเพียงคำเดียวเท่านั้น) ฉันยังพยายามตรวจสอบให้แน่ใจว่าทั้งองค์ประกอบที่ฉันต้องการใช้กฎและพาเรนต์มีตำแหน่ง: สัมพันธ์กับหน้าของฉันเอง แต่ก็ยังไม่เพิ่มตัวแบ่งหน้าเมื่อพิมพ์ นี่เป็นคุณลักษณะที่เกิดขึ้นใน Chrome หรือไม่?

— Joe Dyndale

คุณพูดถูก .... ดูเหมือนว่าจะใช้งานไม่ได้ใน Chrome เวอร์ชันล่าสุด อย่างไรก็ตามคุณสามารถแทนที่ด้วย: -webkit-region-break-inside: หลีกเลี่ยง; (ดูอันนี้: jsfiddle.net/QCvA5/22/show )

— ปีเตอร์

@Peter อัพเดทที่นี่ไหม? ผมโพสต์คำถาม SOpage-break-insideกับรางวัลพยายามที่จะแก้ไขสถานการณ์ที่ฉันได้ใช้ ความช่วยเหลือใด ๆ

— Zach Saucier

1

สิ่งนี้ใช้ได้ผลกับฉันด้วยความแปลกอย่างหนึ่ง - ใช้ได้ก็ต่อเมื่อฉันใส่สไตล์ไว้ในบรรทัดไม่ใช่ในไฟล์ css แยกต่างหาก ฉันใช้มันกับองค์ประกอบ h7 Chrome เวอร์ชัน 38.0.2125.111 ม.

<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>

— Gavin Simpson

16

ฉันแค่อยากจะทราบว่า Chrome ยังละเว้นการตั้งค่า page-break- * css ใน div ที่ลอยอยู่

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

หมายเหตุอีกประการหนึ่ง: IE7 ไม่สามารถรับทราบการตั้งค่าตัวแบ่งหน้าหากไม่มีความสูงที่ชัดเจนในองค์ประกอบบล็อกก่อนหน้า:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

— ฟอร์ดาเรห์
แหล่งที่มา

2

อาจเป็นเพราะการลอยองค์ประกอบจะนำองค์ประกอบนั้นออกจากโฟลว์เอกสารในลักษณะเดียวกับการวางตำแหน่งอย่างแน่นอน องค์ประกอบที่มีตำแหน่ง: ค่าสัมบูรณ์จะใช้ไม่ได้กับ page-break- *

— Joe Dyndale

1

นอกจากนี้: ไม่ควรมีองค์ประกอบลอยตัวหรือตำแหน่งที่แน่นอนในกลุ่มผู้ปกครองทั้งหมดขององค์ประกอบที่มีลักษณะแบ่งหน้า ฉันมีแม่แบบ bootstrap "col-xs-12" เมื่อฉันตั้งค่า "float: none" ไว้อย่างชัดเจนตัวแบ่งหน้าเริ่มทำงาน!

— Stalinko

12

ฉันมีปัญหาคล้ายกับสิ่งนี้ แต่ในที่สุดฉันก็พบวิธีแก้ปัญหา ฉันมีoverflow-x: hidden; นำไปใช้กับแท็ก <html> ดังนั้นไม่ว่าฉันจะทำอะไรด้านล่างใน DOM ก็ตามจะไม่อนุญาตให้มีการแบ่งหน้า โดยการเปลี่ยนกลับเป็นoverflow-x: visible; มันทำงานได้ดี

หวังว่าสิ่งนี้จะช่วยใครสักคนได้

— เดวิดเบฮาน
แหล่งที่มา

โปรดทราบว่าองค์ประกอบหลักที่มีคุณสมบัติล้นบางอย่างอาจทำให้เกิดปัญหานี้ได้ * { overflow-x: visible }ฉันเพิ่งเพิ่มกฎ

— Garrett

10

ฉันประสบปัญหานี้ด้วยตัวเองหน้าของฉันหยุดทำงานได้ในทุกเบราว์เซอร์ยกเว้น Chrome - และสามารถแยกมันลงไปที่องค์ประกอบแบ่งหน้าหลังจากที่อยู่ภายในเซลล์ตาราง (เทมเพลตเก่าที่สืบทอดมาใน CMS)

เห็นได้ชัดว่า Chrome ไม่ให้เกียรติคุณสมบัติ page-break-before หรือ page-break-after ภายในเซลล์ตารางดังนั้นตัวอย่างของ Phil เวอร์ชันที่แก้ไขนี้จึงใส่บรรทัดแรกที่สองและสามไว้ในหน้าเดียวกัน:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

อนุญาตให้ใช้งาน Chrome (อย่างมีพิรุธ) ตามข้อกำหนด CSS คุณสามารถดูเพิ่มเติมได้ที่นี่: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=th

— เนทคุก
แหล่งที่มา

นี่เป็นปัญหาของฉัน - บังคับให้ใช้เซลล์ตารางสำหรับเค้าโครงโดย SharePoint 2007 ดังนั้น Chrome จึงปฏิบัติตามการประกาศเค้าโครงสไตล์ชีตพิมพ์ :(

— Dexter

8

ระวัง CSS: display:inline-blockเมื่อพิมพ์

ไม่มีคุณสมบัติ CCS ที่ไปที่หน้าถัดไปที่จะใช้ได้กับฉันใน Chrome และ Firefox ถ้าตารางของฉันอยู่ใน div ที่มีสไตล์ display:inline-block

ตัวอย่างเช่นสิ่งต่อไปนี้ใช้ไม่ได้:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

แต่งานต่อไปนี้:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

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

1

และ "ลอย" ด้วย. ไม่ควรมีคุณสมบัติ "ลอย" ในองค์ประกอบหลัก

— Jimba Tamang

2

เช่นเดียวกันกับdisplay: flex

— Michael Schmid

4

ฉันประสบปัญหานี้ใน chrome มาก่อนและสาเหตุของมันคือมี div ที่ตั้งค่า min-height เป็นค่า วิธีแก้ปัญหาคือรีเซ็ตความสูงต่ำสุดขณะพิมพ์ดังนี้:

@media print {
    .wizard-content{
        min-height: 0;
    }
}

— Hamdy Ahmed
แหล่งที่มา

3

ปรับปรุง 2016:

ฉันมีปัญหานี้เมื่อฉันมี

overflow:hidden

บน div ของฉัน

หลังจากที่ทำ

@media print {
   div {
      overflow:initial !important
   }
}

ทุกอย่างเรียบร้อยและสมบูรณ์แบบ

— x0 z1
แหล่งที่มา

1

วิธีนี้ช่วยแก้ปัญหาเมื่อไม่มีอะไรทำ ขอบคุณ!

— bstory

1

หากคุณใช้ Chrome กับ Bootstrap Css คลาสที่ควบคุมเค้าโครงกริดเช่น col-xs-12 และอื่น ๆ จะใช้ "float: left" ซึ่งตามที่คนอื่น ๆ ชี้ให้เห็นจะทำให้หน้าแตก นำสิ่งเหล่านี้ออกจากหน้าของคุณเพื่อพิมพ์ มันได้ผลสำหรับฉัน (ใน Chrome เวอร์ชัน = 49.0.2623.87)

— แอสตร้าแบร์
แหล่งที่มา

0

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

    width:100%

และใช้

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

ใช้ในบรรทัดแรก

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

0

เท่าที่ฉันรู้วิธีเดียวที่จะทำให้การแบ่งหน้าถูกต้องในตารางด้วย Google Chrome คือการให้องค์ประกอบแสดง<tr>คุณสมบัติ: inline-table (หรือ display: inline-block แต่เหมาะกว่าในกรณีอื่น ๆ ที่ไม่ใช่ตาราง ). นอกจากนี้ควรใช้คุณสมบัติ "page-break-after: always; page-break-inside: หลีกเลี่ยง;" เขียนโดย @Phil Ross

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>

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

1

คำแนะนำใด ๆ ในการทำให้สิ่งนี้ไม่ทำลายขอบ / ช่องว่างภายใน tds หรือไม่?

— joeforker

@joeforker คุณควรใช้ <tr> กับ "padding: 0; margin: 0;" และให้คุณสมบัติระยะขอบกับองค์ประกอบที่อยู่ภายใน

— Codekraft

-2

มันใช้ได้ผลสำหรับฉันเมื่อฉันใช้ช่องว่างภายในเช่น:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>

— ทูเวียคูซิด
แหล่งที่มา

สิ่งนี้ใช้ได้ผลเพียงเพราะการขยายและไม่ใช่เพราะการแบ่งหน้า

— Char