CODEWITHSUNDEEP
reactjspdfprintingmaterial-ui
Thidasa Pankaja
Thidasa Pankaja

Reputation: 1080

How can I use page break in react-to-print?

I have a requirement to turn some print a page which is created using Material UI react components. It's working well and I'm able to go to the print screen. The document I need to get printed goes to 2 pages. I need to break from a component and start printing it from 2nd page.

Here's my style code for the component I've used to break the page. I'm using Material-ui withStyles to inject the styles to the component.

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

And here's the components I need to get printed.

<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>
);

After the renderContentOne returns the content I need the next component to started printing in a new page. So, the page-break-before style doesn't seems to work. Is there anyway I can make this work ? Or else any other suitable library I can use ? Any help would be greatly appreciated. Thanks in advance

Upvotes: 4

Views: 14763

Answers (1)

Sid Holland
Sid Holland

Reputation: 2921

It looks like the existence of display: flex on the Grid container (which is the default for Material UI grids) is conflicting with the page break CSS. I had a similar problem and solved it by changing the display CSS property on the parent.

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

Given that you have a Grid container nested inside another, you might need to put this on both of them.

In my case I was lucky that I didn't require the flex layout on the container, but if you do need it then this solution might not work and will mess with your layout.

Upvotes: 4

Related Questions