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

【问题标题】：How can I use page break in react-to-print?如何在 react-to-print 中使用分页符？
【发布时间】：2020-03-30 07:01:26
【问题描述】：

我需要打开一些打印页面，该页面是使用 Material UI 反应组件创建的。它运行良好，我可以进入打印屏幕。我需要打印的文件有 2 页。我需要脱离一个组件并从第 2 页开始打印它。

这是我用来中断页面的组件的样式代码。我正在使用 Material-ui withStyles 将样式注入组件。

 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 样式似乎不起作用。无论如何我可以完成这项工作吗？或者我可以使用任何其他合适的库？任何帮助将不胜感激。提前致谢

【问题讨论】：

您好，我也面临同样的问题。找到解决办法可以分享一下吗？
嗨@KireetiGanisetti，我无法解决

标签： reactjs pdf printing material-ui

【解决方案1】：

看起来Grid container 上的display: flex（这是 Material UI 网格的默认设置）与分页符 CSS 冲突。我遇到了类似的问题，并通过更改父级上的display CSS 属性解决了它。

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

鉴于您有一个 Grid container 嵌套在另一个中，您可能需要将它放在它们两个上。

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

【讨论】：