如何在打印窗口中的div後顯示分頁符？

我目前正在把數據放在具有邊框的自定義組件中，並且使用了ExtJs 4.我希望在頁面上有四個組件，並且之後有分頁符。現在，我使用這個CSS：如何在打印窗口中的div後顯示分頁符？

@media print { 
    .app .pb { 
     page-break-after: always; 
     clear: both; 
    } 
}

我有一些JavaScript代碼，每4張牌後，增加了一個div類pb：

if (index % 4 === 3) { 
    this.down('#cards').add({ 
     xtype: 'component', 
     html: '<div class="pb"></div>' 
    }); 
}

我知道的CSS線clear:both;工作，但page-break-after: always;似乎永遠不會工作。我看這些問題：

但到目前爲止，該解決方案還沒有爲我工作。我認爲這可能是因爲Extjs對每個組件都有一個嵌套的div系統？這裏是div結構的截圖：

Extjs Nested Div Structure

正如你所看到的，與pb類的div是在正確的位置 - 每3張牌後。那麼爲什麼分頁不起作用呢？

這裏是組件的PIC在打印頁面被切斷：

Components being cut off

任何幫助將不勝感激！

編輯：下面是一些相關的JavaScript和CSS應該幫助：

在我的js文件的開頭：

this.add({ 
    xtype: 'container', 
    itemId: 'cards' 
});

添加的每個記錄到卡容器：在card的xtype只是每個記錄的模板html]

Ext.Array.each(records, function(record, index) { 
    this.down('#cards').add({ 
     xtype: 'card', 
     data: record.data 
    }); 

    if (index%4 === 3) { 
     this.down('#cards').add({ 
      xtype: 'component', 
      html: '<div class="pb"></div>' 
     }); 
    } 
}, this);

每個記錄的Css：

.app .record { 
    background-color: #fff; 
    border: 2px solid #000; 
    float: left; 
    height: 3.2in; 
    margin: 0.1in 0.1in 0.1in 0.1in; 
    position: relative; 
    overflow: hidden; 
    width: 4.3in; 
}

注：此代碼在Firefox，而不是在Chrome。

來源

2014-04-08 Blundering Philosopher

請分享您的代碼？需要看到整個代碼，包括css – aneelkkhatri

@aneelkkhatri我加了一點，應該是有幫助的。整個代碼有點冗長，所以我想避免這個。 –

，這是讓分頁與分機4，我們的結構，工作的重點是CSS屬性添加到頁面打印時：

.print-page .app { 
    overflow: hidden !important; 
}

我們認爲這是必要的，因爲申報單的結構Ext自動創建。

來源

2014-04-16 20:32:27

如何在打印窗口中的div後顯示分頁符？

回答

相關問題