fix: multiple blank pages in generated pdf

package.json

@@ -19,7 +19,6 @@
     "@typescript-eslint/parser": "^4.28.1",
     "canvas": "^2.8.0",
     "html2pdf.js": "git+https://github.com/eKoopmans/html2pdf.js.git#ccb3444d461844bd4949eb1f698a693af2bab17a",
-    "jspdf": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
@@ -108,4 +107,4 @@
     "standard-version": "^9.3.0",
     "ts-node": "^10.0.0"
   }
-}
+}

src/components/PaperPage.tsx

@@ -20,6 +20,12 @@ const paperPageStyles = makeStyles(() => ({
       boxShadow: 'none',
       margin: 0,
     },
+
+    '.print-ready &': {
+      borderRadius: 0,
+      boxShadow: 'none',
+      margin: 0,
+    },
   },
 
   content: {

src/components/forms/CustomizeForm.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, {
   ReactNode, FormEvent, ChangeEvent,
 } from 'react';
 import html2pdf from 'html2pdf.js';
 import {
-  Button, ButtonGroup, Collapse, makeStyles, Select, Typography,
+  Button, Collapse, makeStyles, Select, Typography,
 } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import FieldSet from './FieldSet';
@@ -63,17 +64,20 @@ const CustomizeForm = ({
       if (submitType === 'pdf') {
         const element = document.querySelector('#paper-preview');
         if (element !== null) {
+          element.classList.add('print-ready');
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           html2pdf(element, {
             filename: `${name} ${timeStamp()}`,
+            pagebreak: { mode: 'css' },
             html2canvas: {
               scale: 3,
             },
             jsPDF: {
               format: options.paperSize.code,
               orientation: options.orientation,
             },
-          });
+          }).then(() => element.classList.remove('print-ready'))
+            .catch((e) => console.error(e));
         }
       } else {
         window.print();
@@ -187,6 +191,7 @@ const CustomizeForm = ({
         >
           Generate PDF
         </Button>
+        <p>Warning: Generate PDF is experimental.</p>
       </form>
     </div>
   );

src/custom.d.ts

@@ -34,11 +34,14 @@ interface HTML2PDFOptions {
   html2canvas?: HTML2CanvasOptions;
   jsPDF?: JsPDFOptions;
   pagebreak?: {
-    mode: PageBreakMode | PageBreakMode[];
+    mode?: PageBreakMode | PageBreakMode[];
+    before?: string | string[];
+    after?: string | string[];
+    avoid?: string | string[];
   };
   enableLinks?: boolean;
 }
-type Html2PDF = (element: AnyElement, options?: HTML2PDFOptions) => void;
+type Html2PDF = (element: AnyElement, options?: HTML2PDFOptions) => Promise<unknown>;
 declare module 'html2pdf.js' {
   const html2pdf: Html2PDF;
   export default html2pdf;