html - 无法使用打印 css 在最新的 chrome 浏览器中设置页码

标签 html css printing

我正在尝试打印一张超过 2 页的发票，我希望页码在打印时显示在底部。它在 Firefox 上运行良好，但 chrome 仅在所有页面中打印第 1 页。是否有任何解决方法(打印页码的替代方法)？我尝试了很多解决方案，但这不适用于 chrome 或 IE。请帮忙

@charset "utf-8";
/* CSS Document */

@page {
   size:8.27in 11.69in; 
   margin: 0.5cm; 
}



body { font-family:"Courier New", Courier, monospace; line-height: 1.5;
	font-size: 11pt; }
.header { position:fixed; top:0; text-align:center; width:100%; margin: 0 auto; height:100px; bottom:1em; }

.page-layout {
        page-break-after: always; position: relative;
    width: 100%;
    top:2em;   //match size of header
    left:0px;
    right:0px;       
    }         
.footer {  position:fixed; bottom:0; text-align:center; width:100%; margin:0 auto; }
.footer:after { width:100%;  margin:0 auto; text-align:center;
    counter-increment: page;
   content:"Page " counter(page);
}	
.inv-details {  }
.tstripe { border-top:2px dashed #000;} 
table {
	page-break-inside: avoid;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Invoice</title>
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
</head>

<body>

<div class="header">Commercial Invoice</div>
<div class="page-layout">
<div class="footer"></div>
<table class="inv-details" width="100%">
	<tr>
    	<td>Invoice Number</td>
        <td>Purpose of Shipment</td>
        <td>Curr <br /> USD</td>
        <td>Ult Dest. <br /> US </td>
    </tr>
    <tr>
    	<td>Export Dt <br /> 8/14/2017 </td>
        <td>C.I. References </td>
        <td>Pkgs <br /> 1 <br /> OTH </td>
        <td>Bill T/C <br /> 1378-4267-0 </td>
      </tr>
</table>
<table class="tstripe" width="100%">
	<tr>
    	<td width="50%">Shipper: <br />
        VENNY PERSAUD <br />
        SBC INC, <br />
        130 MATHESON BLVD, E, <br />
        UNIT 1</td>
        <td width="50%">Consignee: <br />
        Marlon Browder <br />
        Marlon Browder <br />
        320 E GILLESPIE ST 
        </td>
      </tr>
      <tr>
      	<td width="50%">MISSISSAUGE <br />
        ON L4Z1Y6 CA (866) 330-1272 <br />
        ID / EIN: </td>
        <td width="50%">STARKVILLE <br />
        MS 39759 US (622) 617-9890 <br />
        ID / EIN:
        </td>
      </tr>
</table>
<table class="tstripe" width="100%">
	<tr>
    	<td  valign="top" width="50%">
        	Broker <br />
            FedEx Ground's Broker
        </td>
        <td>
        	Importer <br />
            VENNY PERSAUD <br />
            SBC INC, <br />
            130 MATHESON BLVD, E, <br />
            UNIT 1 <br />
            MISSISSAUGA <br />
            ON L4Z1Y6 CA (866) 330 - 1272 <br />
            ID / EIN: <br />
        </td>
    </tr>
</table>
<!-- Item 1 -->
<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Latex Ballon
        </td>
      </tr>
</table>
<!-- Item 2 -->
<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>

<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>

<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>

<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>

<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>



<!-- Total -->
<table class="tstripe" width="100%"  style="margin-top:30px;">
	<tr>
    	<td align="right">Total Shipment Weight::</td>
        <td>1</td>
        <td align="right">Total Commodity </td>
        <td align="right">29.12</td>
     </tr>
     <tr>
     	<td align="right" colspan="3">Terms of Sale:</td>
        <td align="right">FCA</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Freight:</td>
        <td align="right">0.00</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Insurance:</td>
        <td align="right">0.00</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Others:</td>
		<td align="right">0.00</td>
       </tr>
       <tr>
       	<td align="right"  colspan="3">Total Invoice Value:</td>
        <td align="right">29.12</td>
       </tr>			     	
</table>

<table>
<tr><td>	Comments</td></tr>
<tr><td>1)  </td></tr>
<tr><td>2) </td></tr>
<tr><td>3) </td></tr>
<tr>
	<td>Tracking Numbers: 738443302589 </td>
 </tr>
 <tr>
	<td>I declare all information in this invoice to be true and correct. </td>
   </tr>
  <tr>
	<td>Signature of shipper: VENNY PERSAUD <span style="float:right;">8/14/2017</span></td>
</tr>
</table>
</div>
</body>
</html>

最佳答案

我找到了一种在 chrome 中使用 jquery 以某种方式执行此操作的方法。

var bottom = 0;
$(document).ready(function() {
  $("table:nth-child(9n)").each(function() {
    bottom -= 5;
    botString = bottom.toString();
    var $counter = $('.footer.first').clone().removeClass('first');
    $counter.css("bottom", botString + "vh");
    ($counter).insertBefore('.insert');
  });
});
@charset "utf-8";
/* CSS Document */

@page {
   size:8.27in 11.69in; 
   margin: 0.5cm; 
}



body { font-family:"Courier New", Courier, monospace; line-height: 1.5;
	font-size: 11pt; }
.header { position:fixed; top:0; text-align:center; width:100%; margin: 0 auto; height:100px; bottom:1em; }

.page-layout {
        page-break-after: always; position: relative;
    width: 100%;
    top:2em;   //match size of header
    left:0px;
    right:0px;       
     
    }    
    body { counter-reset: page; }     
.footer {text-align:center; width:100%; margin:0 auto; position: absolute; }
.footer::after { top: 95vh; position: relative;
    white-space: nowrap; 
    z-index: 20px; width:100%;  margin:0 auto; text-align:center;
    counter-increment: page;
   content:"Page " counter(page);
}	
.inv-details {  }
.tstripe { border-top:2px dashed #000;} 
table {
	page-break-inside: avoid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer first"></div>
 <div class="insert"></div>
<div class="header">Commercial Invoice</div>
<div class="page-layout">

<table class="inv-details" width="100%">
	<tr>
    	<td>Invoice Number</td>
        <td>Purpose of Shipment</td>
        <td>Curr <br /> USD</td>
        <td>Ult Dest. <br /> US </td>
    </tr>
    <tr>
    	<td>Export Dt <br /> 8/14/2017 </td>
        <td>C.I. References </td>
        <td>Pkgs <br /> 1 <br /> OTH </td>
        <td>Bill T/C <br /> 1378-4267-0 </td>
      </tr>
</table>
<table class="tstripe" width="100%">
	<tr>
    	<td width="50%">Shipper: <br />
        VENNY PERSAUD <br />
        SBC INC, <br />
        130 MATHESON BLVD, E, <br />
        UNIT 1</td>
        <td width="50%">Consignee: <br />
        Marlon Browder <br />
        Marlon Browder <br />
        320 E GILLESPIE ST 
        </td>
      </tr>
      <tr>
      	<td width="50%">MISSISSAUGE <br />
        ON L4Z1Y6 CA (866) 330-1272 <br />
        ID / EIN: </td>
        <td width="50%">STARKVILLE <br />
        MS 39759 US (622) 617-9890 <br />
        ID / EIN:
        </td>
      </tr>
</table>
<table class="tstripe" width="100%">
	<tr>
    	<td  valign="top" width="50%">
        	Broker <br />
            FedEx Ground's Broker
        </td>
        <td>
        	Importer <br />
            VENNY PERSAUD <br />
            SBC INC, <br />
            130 MATHESON BLVD, E, <br />
            UNIT 1 <br />
            MISSISSAUGA <br />
            ON L4Z1Y6 CA (866) 330 - 1272 <br />
            ID / EIN: <br />
        </td>
    </tr>
</table>


<!-- Item 1 -->
<table class="tstripe" width="100%">
    <tr>
        <td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
    <tr>
        <td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
        <td colspan="4">
            Desc: Foil Ballon
        </td>
      </tr>
</table>


<!-- Item 2 -->
<table class="tstripe" width="100%">
	<tr>
    	<td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
	<tr>
    	<td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
    	<td colspan="4">
        	Desc: Foil Ballon
        </td>
      </tr>
</table>

<!-- Item 3 -->
<table class="tstripe" width="100%">
    <tr>
        <td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
    <tr>
        <td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
        <td colspan="4">
            Desc: Foil Ballon
        </td>
      </tr>
</table>

<!-- Item 4 -->
<table class="tstripe" width="100%">
    <tr>
        <td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
    <tr>
        <td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
        <td colspan="4">
            Desc: Foil Ballon
        </td>
      </tr>
</table>

<!-- Item 5 -->
<table class="tstripe" width="100%">
    <tr>
        <td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
    <tr>
        <td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
        <td colspan="4">
            Desc: Foil Ballon
        </td>
      </tr>
</table>


<!-- Item 6 -->
<table class="tstripe" width="100%">
    <tr>
        <td>Part Nbr:</td>
        <td>Marks / Nbrs: </td>
        <td>Cntry MFG: US </td>
        <td> Net Wgt: 0.00 lbs</td>
    </tr>
</table>
<table width="100%">
    <tr>
        <td>HS Code: 9503.90 </td>
        <td>Unit Qty: 1.00 PCS </td>
        <td>Unit Value: 5.600000</td>
        <td>Commodity Value: 5.60 </td>
    </tr>
    <tr>
        <td colspan="4">
            Desc: Foil Ballon
        </td>
      </tr>
</table>

<!-- Total -->
<table class="tstripe" width="100%"  style="margin-top:30px;">
	<tr>
    	<td align="right">Total Shipment Weight::</td>
        <td>1</td>
        <td align="right">Total Commodity </td>
        <td align="right">29.12</td>
     </tr>
     <tr>
     	<td align="right" colspan="3">Terms of Sale:</td>
        <td align="right">FCA</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Freight:</td>
        <td align="right">0.00</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Insurance:</td>
        <td align="right">0.00</td>
      </tr>
      <tr>
      	<td align="right"  colspan="3">Others:</td>
		<td align="right">0.00</td>
       </tr>
       <tr>
       	<td align="right"  colspan="3">Total Invoice Value:</td>
        <td align="right">29.12</td>
       </tr>			     	
</table>

<table>
<tr><td>	Comments</td></tr>
<tr><td>1)  </td></tr>
<tr><td>2) </td></tr>
<tr><td>3) </td></tr>
<tr>
	<td>Tracking Numbers: 738443302589 </td>
 </tr>
 <tr>
	<td>I declare all information in this invoice to be true and correct. </td>
   </tr>
  <tr>
	<td>Signature of shipper: VENNY PERSAUD <span style="float:right;">8/14/2017</span></td>
</tr>
</table>
</div>

关于html - 无法使用打印 css 在最新的 chrome 浏览器中设置页码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46542080/

上一篇：CSS Grid-gap 不适用于移动设备

下一篇：php - WordPress 在主题支持中检索缩略图

相关文章：

html - <use/> <symbol/> 与 &lt;style/> 来应用基于应用于父级 HTML 的类的 CSS 规则

angularjs - 在 angularjs 中创建可重用模式窗口的最佳方法

printing - WebBrowser 控件 - 控制台应用程序 - 事件未触发

javascript - IE9 中远程文件的 window.print() 问题

javascript - 插入 HTML 时添加逗号的字符串数组

javascript - 使用带有 href 按钮的 React-router

html - 带有CSS的三 Angular 形边框装饰

html - CSS 将 div 置于图像之上

html - 为什么 box-shadow 属性不应用于 <tr> 而是直接应用于 Edge 中的 <td> 元素？

css - execCommand 未在 IE8/9 中禁用 'Shrink To Fit' - 横向

©2024 IT工具网  联系我们