除了分頁和分頁之外的Css打印控制

我正在設計一個Web界面，它將在Avery的一張標籤上打印條形碼。如何確保每件商品上的每件商品完全一致（使用英寸或釐米等物理尺寸有助於幫助？），並且更重要的是，如何確保每套標籤均位於其自己的頁面上，而不會滲入另一頁面？除了分頁和分頁之外的Css打印控制

我當前的解決方案爲每個頁面使用大小與表格匹配的表格（儘可能最好，打印多餘的頁面最終會使條形碼脫離標籤）這個小凸點阻止了我在條形碼下添加信息，因爲它會使顛簸變得更糟。我研究過頁面中斷和頁面中斷之前，但是設置它們似乎沒有效果。

在此先感謝！

來源

2012-03-14 bug56

某些代碼嗎？...你說的「接口」，但我設想一個空白頁條碼，但我無法確定，因爲您沒有提供數據。但是，在印刷和網絡方面，它們是兩個世界。一個是72dpi，一個是比那更多的dpi。我猜平均打印機使用120dpi。出於這個原因，你可能無法準確預測每次系統的行爲。但是如果你提供了一些代碼，我相信它會讓它「幾乎總是」工作...... – 2012-03-14 15:44:50

即使您沒有提供任何代碼，我將它取刺：

首先，獲取Selectivizr和jQuery讓IE可以閱讀CSS3的東西，我們需要：

Selectivizr：http://selectivizr.com/
的jQuery：http://jquery.com/

下面是HTML我迅速成立：

<div id="wrapper"> 
     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 
    </div>

這裏是你需要的CSS：每6條形碼後

body { margin: 0; padding: 0; } 
    #wrapper { width: 100%; display: block; } 
    .barcode { width: 30%; float: left; margin-bottom: 50px; } 
    .barcode img { display: block; width: 150px; height: 150px; margin: 0 auto 10px auto; } /* set to whatever the barcodes will be in size */ 
    .barcode span { display: block; text-align: center; } 
    #wrapper div.barcode:nth-child(3n+4) { clear: left; } 
    #wrapper div.barcode:nth-child(6n+6) { page-break-after: always; background: #000; } /* Use 9n+9 to page break after each 9th item. */

這將分頁符。如果我正確理解你的問題，這個「應該總是有效」。

當然，我在我對測試系統的量有限... :)

來源

2012-03-14 16:00:13

除了分頁和分頁之外的Css打印控制

回答

相關問題