reactjs - 如何在 react-to-print 中使用分页符？

Question

我需要打印一个使用 Material UI React 组件创建的页面。它运行良好，我可以进入打印屏幕。我需要打印的文档有 2 页。我需要中断一个组件并从第二页开始打印它。

这是我用来分页的组件的样式代码。我正在使用 Material-ui withStyles 将样式注入(inject)组件。

 print: {
    '@media print': {
      display: 'block',
      pageBreakBefore: 'always',
    },
  },

这是我需要打印的组件。

<div className={classes.body}>
    <Grid container>
      <Grid item xs={12} className={classes.root}>
        <Typography variant="h3" className={classes.title}>
          <FormattedMessage {...messages.types} />
        </Typography>
        <Typography
          className={classes.caption}
          variant="body2"
          component="span"
        >
          {`(${this.type()} Type - ${data.type})`}
        </Typography>
      </Grid>
      <Grid container spacing={2}>
        {this.renderContentOne()}
        <Grid item xs={12} className={`${classes.root} ${classes.print}`}>
          <Portlet>
            <PortletHeader>
              <Grid item>
                <Typography variant="subtitle2">
                  {intl.formatMessage({
                    ...messages.details,
                  })}
                </Typography>
              </Grid>
            </PortletHeader>
            <PortletContent>
              <Fragment>{this.renderDetailContent()}</Fragment>
            </PortletContent>
          </Portlet>
        </Grid>
      </Grid>
    </Grid>
</div>
);

renderContentOne 返回内容后，我需要下一个组件开始在新页面中打印。因此，page-break-before 样式似乎不起作用。无论如何我可以做这个工作吗？或者我可以使用任何其他合适的库？任何帮助将不胜感激。提前致谢

Answer 1

Grid 容器(这是 Material UI 网格的默认设置)上的 display:flex 似乎与分页符 CSS 冲突。我遇到了类似的问题，并通过更改父级的 display CSS 属性解决了这个问题。

parentContainer: {
    '@media print': {
        display: 'block'
    },
},

假设您有一个 Grid 容器 嵌套在另一个容器中，您可能需要将它放在两个容器中。

在我的例子中，我很幸运，我不需要容器上的 flex 布局，但如果你确实需要它，那么这个解决方案可能不起作用，并且会弄乱你的布局。