如何在打印窗口中的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后显示分页符？

回答

相关问题