HTML2PDF.JS Tutorial to Fix Blank Page in PDF Document Problem After Page Limit Inside PHP & Javascript in Browser

HTML2PDF.js Tutorial to Fix Blank Page in PDF Document Problem After Page Limit inside PHP & Javascript in Browser

const opt = { margin: 1, filename: 'docIdpdf.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 1, useCORS: true, windowHeight: windowHeight }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } };

import html2pdf from 'html2pdf.js';
import jsPDF from 'jspdf';
 
const exportHTMLToPDF = async (pages, outputType='blob') => {
  const opt = {
    margin:       [0,0],
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { dpi: 192, letterRendering: true },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };
  const doc = new jsPDF(opt.jsPDF);
  const pageSize = jsPDF.getPageSize(opt.jsPDF);
  for(let i = 0; i < pages.length; i++){
    const page = pages[i];
    const pageImage = await html2pdf().from(page).set(opt).outputImg();
    if(i != 0) {
      doc.addPage();
    }
    doc.addImage(pageImage.src, 'jpeg', opt.margin[0], opt.margin[1], pageSize.width, pageSize.height);
  }
  // This can be whatever output you want. I prefer blob.
  const pdf = doc.output(outputType);
  return pdf;
}

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment