จะหลีกเลี่ยงหน้าว่างส่วนท้ายขณะพิมพ์ได้อย่างไร?

Question 1

ฉันใช้คุณสมบัติ CSS

ถ้าฉันใช้page-break-after: always;=> มันจะพิมพ์หน้าว่างส่วนเกินมาก่อน

ถ้าฉันใช้page-break-before: always;=> มันจะพิมพ์หน้าว่างเพิ่มเติมตามหลัง จะหลีกเลี่ยงสิ่งนี้ได้อย่างไร?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

คุณอาจจะเพิ่ม

.print:last-child {
     page-break-after: auto;
}

ดังนั้นprintองค์ประกอบสุดท้ายจะไม่ได้รับการแบ่งหน้าเพิ่มเติม

โปรดทราบว่า IE8 ไม่รองรับ: ตัวเลือกลูกสุดท้ายหากคุณกำหนดเป้าหมายเบราว์เซอร์ที่เลวร้ายนั้น

Question 3

คุณลองสิ่งนี้แล้วหรือยัง?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

โซลูชันที่อธิบายไว้ที่นี่ช่วยฉันได้ ( ลิงก์ webarchive )

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

div { border: 1px solid black;}

และวิธีแก้ปัญหาก็คือการเพิ่มสไตล์ต่อไปนี้:

html, body { height: auto; }

Question 5

หากไม่มีผลงานเหล่านั้นให้ลองทำเช่นนี้

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

ตรวจสอบให้แน่ใจว่าเป็น 100vh

Question 6

สิ่งนี้ใช้ได้กับฉัน

.print+.print {
    page-break-before: always;
}

Question 7

หากคุณต้องการใช้ CSS และต้องการหลีกเลี่ยงการแบ่งหน้าให้ใช้

.print{
    page-break-after: avoid;

}

ดูสื่อเพจ

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

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

คลิกที่นี่เพื่อดูตัวอย่างที่ใช้สิ่งนี้ คุณสามารถแทนที่ H2 ภายในสคริปต์ด้วยแท็กอื่นเช่น P หรือ DIV

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

ตั้งค่าdisplay:noneสำหรับองค์ประกอบอื่น ๆ ทั้งหมดที่ไม่ใช่สำหรับงานพิมพ์ การตั้งค่าvisibility:hiddenจะซ่อนไว้ แต่ทั้งหมดยังคงอยู่ที่นั่นและใช้พื้นที่สำหรับพวกเขา หน้าว่างมีไว้สำหรับองค์ประกอบที่ซ่อนอยู่

Question 9

ไม่รู้ว่าทำไม (ตอนนี้) แต่อันนี้ช่วยได้:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

หวังว่าใครบางคนจะช่วยผมของเขาในขณะที่ต่อสู้กับปัญหา ... ;)

Question 10

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

สาเหตุของฉัน: min-height: 100%ในสไตล์ชีตพื้นฐาน

วิธีแก้ปัญหาของฉัน: min-height: autoใน@media printคำสั่ง

หมายเหตุautoดูเหมือนจะไม่ใช่ค่าที่ถูกต้องตาม PhpStorm อย่างไรก็ตามมันถูกต้องตามเอกสารของ Mozilla เกี่ยวกับความสูงต่ำสุด :

auto
ขนาดต่ำสุดที่เป็นค่าเริ่มต้นสำหรับรายการแบบยืดหยุ่นซึ่งให้ค่าเริ่มต้นที่สมเหตุสมผลมากกว่า 0 สำหรับโครงร่างอื่น ๆ

Question 11

ฉันมีปัญหาที่คล้ายกัน แต่สาเหตุเกิดจากฉันมีระยะขอบ 40px ที่ด้านล่างของหน้าดังนั้นแถวสุดท้ายจะรวมอยู่เสมอแม้ว่าจะมีที่ว่างสำหรับมันในหน้าสุดท้ายก็ตาม ไม่ใช่เพราะpage-break-*คำสั่ง css ใด ๆ ฉันแก้ไขโดยการลบขอบในการพิมพ์และทำงานได้ดี แค่อยากจะเพิ่มวิธีแก้ปัญหาของฉันเผื่อว่ามีคนอื่นที่คล้ายกัน

Question 12

ในกรณีของฉันการตั้งค่าความกว้างให้กับ div ทั้งหมดช่วย:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 13

ฉันเปลี่ยนคุณสมบัติการแสดงผล css และความกว้างของพื้นที่พิมพ์

#printArea{
    display:table;
    width:100%;
}

ขยายข้อมูลโค้ด

Question 14

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

ฉันมี div ซึ่งควรจะเป็นสิ่งเดียวในหน้าที่พิมพ์ออกมา แต่ฉันได้รับหน้าว่างหลายหน้าหลังจากนั้น แท็กร่างกายของฉันถูกตั้งค่าเป็นvisibility:hidden;แต่นั่นยังไม่เพียงพอ องค์ประกอบของหน้าที่สูงในแนวตั้งยังคงใช้พื้นที่ 'ว่าง' ดังนั้นฉันจึงเพิ่มสิ่งนี้ในกฎ CSS การพิมพ์ของฉัน:

#header, #menu, #sidebar{ height:1px; display:none;}

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

Question 15

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

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

คุณให้ body class = "printing" บน doc พร้อมและเปิดใช้งานรูปแบบการพิมพ์ ระบบนี้ช่วยให้สามารถปรับเปลี่ยนรูปแบบการพิมพ์และดูตัวอย่างก่อนพิมพ์ในเบราว์เซอร์ได้

Question 16

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

สิ่งนี้ได้ผลสำหรับฉัน

Question 17

เพิ่ม css นี้ในเพจเดียวกันเพื่อขยายไฟล์ css

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 18

ฉันลองวิธีแก้ปัญหาทั้งหมดแล้วสิ่งนี้ใช้ได้กับฉัน:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 19

ฉันเพิ่งเจอกรณีที่เปลี่ยนจาก

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

ถึง

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

แก้ไขปัญหานี้

Question 20

การตั้งค่าเส้นขอบโปร่งใสที่แปลกประหลาดช่วยแก้ปัญหานี้ให้ฉัน:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

บางทีอาจจะเพียงพอที่จะกำหนดเส้นขอบบนองค์ประกอบคอนเทนเนอร์ <- Untestet

Question 21

ไม่มีคำตอบใดที่ใช้ได้กับฉัน แต่หลังจากอ่านทั้งหมดฉันพบว่าปัญหาคืออะไรในกรณีของฉันฉันมี 1 หน้า Html ที่ฉันต้องการพิมพ์ แต่มันกำลังพิมพ์ด้วยหน้าว่างสีขาวพิเศษ ฉันใช้ AdminLTE ธีม bootstrap 3 สำหรับหน้าของรายงานเพื่อพิมพ์และอยู่ในแท็กส่วนท้ายฉันต้องการวางข้อความนี้ไว้ที่ด้านล่างขวาของหน้า:

พิมพ์โดยคุณคน

ฉันใช้ jquery เพื่อใส่ข้อความนั้นแทนส่วนท้าย "Copy Rights" ก่อนหน้าด้วย

$("footer").html("Printed by Mr. Someone");

และโดยค่าเริ่มต้นในธีมส่วนท้ายของแท็กจะใช้ class .main-footer ซึ่งมีแอตทริบิวต์

padding: 15px;
border-top: 1px solid

นั่นทำให้เกิดพื้นที่สีขาวเพิ่มขึ้นดังนั้นหลังจากทราบปัญหาแล้วฉันจึงมีตัวเลือกต่าง ๆ และตัวเลือกที่ดีที่สุดคือใช้

$( "footer" ).removeClass( "main-footer" );

ในหน้าเฉพาะนั้น

Question 22

ใส่สิ่งที่คุณต้องการบนหน้าใน div และใช้ page-break-inside: หลีกเลี่ยงใน div นั้น div ของคุณจะอยู่ในหน้าเดียวและไปยังหน้าที่สองหรือสามหากจำเป็น แต่ div ถัดไปควรจะต้องแบ่งหน้าควรเริ่มในหน้าถัดไป

Question 23

ตรวจสอบว่ามีช่องว่างหลังแท็ก html ที่ด้านล่างหรือไม่ ลบช่องว่างด้านล่างช่วยฉันได้

Question 24

ขั้นแรกเลียนแบบสไตล์ชีตการพิมพ์ผ่านทาง devtools ของเบราว์เซอร์ของคุณ คำแนะนำสามารถพบได้ที่นี่

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