Is it possible to create page breaks in react?

[conor-v]

trafficstars

I have read and understood the contribution guidelines. Is it possible to create page breaks in react? For the moment i got it working with a fix height setting. But if the content is larger than 1 page, the content breaks randomly and sometimes in the middle of a sentence or photo.

My project: https://codesandbox.io/s/magical-proskuriakova-z46soi?file=/src/App.js:526-865

I had found this but it doesn't work as this is html and jsx doesn't want to recognize this. https://github.com/parallax/jsPDF/blob/master/examples/html2pdf/page_break.html

My function for creating a pdf:

  const [generatePdf, setGeneratePdf] = useState(false);
  const handleDownloadPdf = () => {
    setGeneratePdf(true);
    const doc = new jsPDF();
    doc.html(document.body, {
      callback: function (doc) {
        doc.save();
        setGeneratePdf(false);
      },

      x: 0,
      y: 0,
      width: 200,
      windowWidth: 1500,
      margin: 5,
      autoPaging: true
    });
  };

My content for the pdf:

    <>
      <button onClick={() => handleDownloadPdf()}>pdf</button>
      {[...Array(3)].map((e, i) => (
        <div className="App" style={{ height: generatePdf ? 2122.5 : "auto" }}>
          <ul>
            {[...Array(80)].map((e, i) => (
              <li>{i + 1}</li>
            ))}
          </ul>
        </div>
      ))}
    </>

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[AnthonyPhan]

Issue still exists today.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[mattcasey]

In case anyone else ends up here, the example given uses a deprecated CSS rule. This one is working fine for me:

@media all {
  .page-break {
    display: none;
  }
}
@media print {
  // read about page breaks: https://github.com/gregnb/react-to-print#page-breaks
  .page-break {
    padding-top: 10mm;
    display: block !important;
    break-before: page;
  }
}

[clcoco]

In case anyone else ends up here, the example given uses a deprecated CSS rule. This one is working fine for me:

@media all {
  .page-break {
    display: none;
  }
}
@media print {
  // read about page breaks: https://github.com/gregnb/react-to-print#page-breaks
  .page-break {
    padding-top: 10mm;
    display: block !important;
    break-before: page;
  }
}

Unfortunately it doesn't work, the inside of the div gets split anyway