我使用的是CSS屬性，
如果我使用分頁后:總是；= >它會先打印一張額外的空白頁
如果我使用分頁之前:總是；= >它會在之后打印一個額外的空白頁。如何避免這種情況？
<!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>你試過這個嗎？
@media print {
html, body {
height: 99%;
}
}你也許可以加上
.print:last-child {
page-break-after: auto;
}因此最后一個打印元素不會獲得額外的分頁符。
請注意:如果你的目標是瀏覽器，IE8不支持:last-child選擇器。
這里描述的解決方案幫助了我(webarchive鏈接)。
首先，您可以向所有元素添加border，以查看是什么原因?qū)е伦芳有马撁?可能是一些邊距、填充等)。
div { border: 1px solid black;}解決方案本身就是添加以下風格:
html, body { height: auto; }如果這些都不起作用，試試這個
@media print {
html, body {
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}確保它是100vh
這對我有用
.print+.print {
page-break-before: always;
}我不知道(目前)為什么，但這個幫助了我:
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}希望有人能在解決這個問題的同時拯救他的頭發(fā)...；)
設(shè)置顯示:對于不用于打印的所有其他元素，無。 設(shè)置可見性:隱藏將使它們保持隱藏，但它們?nèi)匀辉谀抢铮樗鼈冋紦?jù)了空間。空白頁是為那些隱藏的元素準備的。
如果你只是想使用CSS并想避免分頁，那么使用
.print{
page-break-after: avoid;
}看一看分頁媒體
您可以對pageBreakBefore和pageBreakAfter使用等效的腳本，動態(tài)分配它們的值。例如，您可以創(chuàng)建一個腳本使其可選，而不是強制訪問者使用自定義分頁符。在這里，我將創(chuàng)建一個復選框，用于在頁眉切片(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
}單擊此處查看使用它的示例。您可以在腳本中用另一個標簽(如P或DIV)替換H2。
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
我也有類似的問題，但原因是因為我在頁面底部有40px的邊距，所以即使最后一頁有空間，最后一行也會換行。不是因為任何一種分頁-* css命令。我通過去除打印頁邊空白來解決這個問題，而且效果很好。只是想補充一下我的解決方案，以防別人也有類似的情況！
似乎有很多可能的原因，可能的主題是身體標簽的高度被認為是太大了。
我的理由:基本樣式表中的最小高度:100%。
我的解決方案是:在@media print指令中使用min-height: auto。
注意，根據(jù)PhpStorm，auto似乎不是一個正確的值。然而，根據(jù)Mozilla關(guān)于最小高度的文檔，這是正確的:
汽車 彈性項目的默認最小大小，為其他布局提供了比0更合理的默認值。
Chrome似乎有一個bug，在某些情況下，隱藏元素后加載顯示:none，會留下很多額外的空間。我猜他們是在文檔渲染完成之前計算文檔的高度。Chrome還會觸發(fā)2 me dia change事件，不支持onbeforeprint等。它們基本上是印刷的ie。以下是我的解決方法:
@media print {
body {
display: none;
}
}
body.printing {
display: block;
}您在doc ready上給出body class="printing ",這就啟用了打印樣式。該系統(tǒng)允許打印樣式的模塊化和瀏覽器內(nèi)打印預覽。
我改變了css顯示和打印區(qū)域的寬度屬性
#printArea{
display:table;
width:100%;
}這對我很有效。
在我的例子中，設(shè)置所有div的寬度有所幫助:
.page-content div {
width: auto !important;
max-width: 99%;
}在與各種分頁符設(shè)置和高度以及body標簽上一百萬種不同的CSS規(guī)則作斗爭之后，我終于在一年后解決了這個問題。
我有一個div，它應該是頁面上唯一可以打印的東西，但是在它之后我得到了幾個空白頁。 我的身體標簽設(shè)置為可見性:隱藏；但這還不夠。垂直高的頁面元素仍然會占用“空間”。因此，我在打印CSS規(guī)則中添加了以下內(nèi)容:
#header, #menu, #sidebar{ height:1px; display:none;}通過包含高頁面布局元素的id定位特定的div。我縮小了高度，然后將它們從布局中移除。不再有空白頁。幾年后，我很高興地告訴我的客戶，我破解了它。希望這能幫助到一些人。
奇怪的是，設(shè)置透明邊框為我解決了這個問題:
@media print {
div {
border: 1px solid rgba(0,0,0,0)
}
}也許在容器元素上設(shè)置邊框就足夠了。& lt-未經(jīng)測試。
我也得到了額外的空白頁，對我來說唯一有效的方法就是將這條規(guī)則添加到我的css中(用于打印)
*
{
box-sizing: border-box;
}這樣我就不用擔心在使用邊距、填充或邊框時會增加額外的像素。
一旦我添加了這條規(guī)則，我只需要調(diào)整盒子的位置，一切都完美無缺。
將此css添加到同一頁面以擴展css文件。
<style type="text/css">
<!--
html, body {
height: 95%;
margin: 0 0 0 0;
}
-->
</style>我嘗試了所有的解決方案，這對我很有效:
<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>我剛剛遇到一個案例
</div>
<script src="addressofjavascriptfile.js"></script>
</body>
</html>到
<script src="addressofjavascriptfile.js"></script>
</div>
</body>
</html>修復了這個問題。
首先，通過瀏覽器的開發(fā)工具模擬打印樣式表。說明可以在這里找到。
然后你會想要尋找額外的填充、空白、邊框等等，這些可能會使你的頁面尺寸超過8.5英寸X11英寸。請?zhí)貏e注意空白，因為這將無法通過打印預覽對話框來檢測。如果有不應該出現(xiàn)的空白，右鍵單擊并檢查光標下的元素應該會突出顯示問題(除非是邊距導致的)。
我還獲得了額外的下方/上方空間，這取決于我是否使用
分頁后:總是；或分頁符之前:總是；
我所做的是移除我所應用的元素的高度和邊框 分頁后或分頁前。
這幫我去掉了多余的一頁。
例如:
/*The element to which we apply page break*/
<div class="page-break-line"></div>內(nèi)部樣式:
<style>
.page-break-line{
/**Make sure you don't give any height,border. Because giving them gives an
extra page.
*/
visibility: hidden;
}
@media print {
/*This is the important to add page break!*/
.page-break-line {
page-break-before: always !important;
}
}
</style>注意:在我需要單獨打印的每一行下面都有一個帶分頁符的div。
沒有一個答案對我有用，但是讀完所有的答案后，我發(fā)現(xiàn)了我的問題所在 我有一個Html頁面，我想打印，但它打印了一個額外的白色空白頁。 我正在為要打印的報告頁面使用AdminLTE a bootstrap 3主題，在它的頁腳標記中，我想將此文本放在頁面的右下角:
某人先生印刷的
我使用jquery來放置該文本，而不是之前的“版權(quán)”頁腳
$("footer").html("Printed by Mr. Someone");默認情況下，主題中的標簽頁腳使用該類。主頁腳 它具有這樣的屬性
padding: 15px;
border-top: 1px solid這導致了額外的空白，所以在知道這個問題后，我有不同的選擇，最好的選擇是使用
$( "footer" ).removeClass( "main-footer" );就在那一頁
將您需要的內(nèi)容放在一個div中的頁面上，并在該div上使用page-break-inside:avoid。 您的div將停留在一個頁面上，如果需要的話，可以轉(zhuǎn)到第二個或第三個頁面上，但是下一個div，如果需要分頁，應該從下一個頁面開始。
檢查底部html標簽后是否有任何空白。刪除下面的空白幫助了我
在我的例子中，額外的頁面問題是由頁面上的表格元素引起的。我嘗試了這里提供的許多解決方案，但是為了解決這個問題，我必須將表格css改為:
table {
width: 99%;
height: 99%;
}我在這里看不到我的答案，所以我想這也是我的答案。
首先，如果你不知道這個技巧，它會有所幫助。您可以使用檢查器預覽打印頁面。點擊右上角的三個點，然后& quot更多工具-& gt；渲染& quot，現(xiàn)在導航到渲染選項卡，您可以模擬CSS媒體類型& quot打印& quot。非常有用！
我采納了@Michael Radionovs的建議，給我的所有元素都加了邊框。我給html，main，body不同的邊框顏色，我注意到我的html和body在最后包圍了我不想要的額外頁面。
給html，body { height:auto；}或者html，body {身高:99%；}對我沒用，但是設(shè)置
html, body { height: max-content }為我的一些印刷品工作。
似乎引起問題的另一個原因是對我的容器元素應用了底部填充或底部空白。這將html、body和main標簽推到了頁面邊界之外，并創(chuàng)建了一個新頁面。所以重置這些屬性值也要用
main, .master, .content { margin: 0; padding: 0 }為我剩下的印刷品工作。
在我的例子中，我給了一個頁邊距-top一個div，這導致了空白頁打印的問題，我刪除了那個頁邊距，問題就消失了。
下面是我們想要應用分頁符的所有元素或組件。
<!-- our all components as JSX/TSX -->
<React.Fragment >
<Container ref={componentRef as any}>
<PageOne />
<PageTwo />
</Container>
</React.Fragment >
<!-- our all components as HTML -->
<div className="container" ref={componentRef as any}>
<div className="page-break">page one</div>
<div className="page-break">page two</div>
</div>現(xiàn)在，讓我們創(chuàng)建一個名為style.css或index.css的樣式文件(無論您想要什么),并添加以下代碼
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@media print {
@page {
size: A4;
margin: 20px;
}
.page-break {
page-break-before: always !important;
}
}這段代碼足以100%解決這個問題 不需要，我只是在這里提到我的**printHandler**
const componentRef = useRef();
const handlePrint = useReactToPrint({
content: () => componentRef.current as any,
documentTitle: "Astrology",
removeAfterPrint: true,
onBeforeGetContent: () => setLoading(true),
onAfterPrint: () => {
setLoading(false);
toast.success("PDF save successfully