Page split using jspdf and html2canvas in react js while downloading pdf

Shama Ahlawat
Oct 16, 2020

--

I have generated pdf from html2canvas and jspdf in react in number of ways.I resolved page split issue , image stretched issue and emplty page issue when downloading pdf after scrolling down.

First way

Points

  1. line no 30 — window.scrollTo(0, 0);

Note — every time when we click on download button first of all it scroll up and then it starts creating pdf of page.This resolves the problem of empty page even if we are at the bottom of the page.

2. line no 48 — doc.addPage();

Note — This line is splitting the pdf into 2 pages.

Second way

Third Way

Fourth Way

Fifth Way

Sixth way

Seventh way

--

--

Shama Ahlawat
Shama Ahlawat

Written by Shama Ahlawat

I am Software Developer and i am working for startup ecosystem. Fashion is my passion.I want to contribute to the world before I die.

Responses (2)