how to export a angular page into pdf with multiple page

Question

I have a very lengthy form in angular and i need to convert it into pdf. Since it is a very lengthy form i have to divide it into smaller chunks and show it in multiple pages in pdf. How can i achieve it. And i also need to add header and footer for every page.

I am using jsPDF and dom-to-image packages for pfd conversion.

Following is the code i wrote for pdf conversion:

exportPdf(){
    var doc = new jsPDF('potrait','px','a4');
    let imageData= new Image();
    imageData.src='../../assets/images/testimg.png';
    var filename="application";
    var options={};
    var img;
    var newImage;
    var node = document.getElementById('formContent');
    var numRowsToCut=3;
    var imagePieces=[];

      domtoimage.toPng(node, { }).then(function(dataUrl) 
      {
        img = new Image();
        img.src = dataUrl;
        newImage = img.src;
        img.onload = function(){

            var pdfWidth = img.width;
            console.log("image width "+pdfWidth);
            var pdfHeight = (img.height)/3;

            var width = doc.internal.pageSize.getWidth();
            console.log("width "+width);
            var height = doc.internal.pageSize.getHeight();

            for(var y = 0; y < numRowsToCut; ++y) {
              var canvas = document.createElement('canvas');
              var context = canvas.getContext('2d');
              context.drawImage(newImage, 0, y *pdfHeight, pdfWidth,pdfHeight, 0, 0,pdfWidth,pdfHeight);
              imagePieces.push(canvas.toDataURL());
          }            

            var docDefinition = {
            content: [{
                image: imagePieces[0],
                width: 500,
                pagebreak:'after'
            },
            {
              image: imagePieces[1],
              width: 500,
              pagebreak:'after'
          },
          {
            image: imagePieces[0],
            width: 500,
            pagebreak:'after'
        }],
            pageBreakBefore: function(currentNode) {
              return currentNode.style && currentNode.style.indexOf('myDivClass') > -1;
            }
          };
          pdfMake.createPdf(docDefinition).download(filename);
        };


      })
      .catch(function(error) {

        // Error Handling
        console.log(error);


      });

  }

Any help will be appreciated.

Shalim Ahmed · Accepted Answer · 2024-07-16 15:11:22Z

If you are using jsPDF, you can think your multipage download PDF function like in below snippets -

downloadPDF() {
    const htmlWidth = document.getElementById('idcard_main').offsetWidth;
    const htmlHeight =  document.getElementById('idcard_main').offsetHeight;

    const topLeftMargin = 15;

    let pdfWidth = htmlWidth + (topLeftMargin * 2);
    let pdfHeight = (pdfWidth * 1.5) + (topLeftMargin * 2);

    const canvasImageWidth = htmlWidth;
    const canvasImageHeight = htmlHeight;

    const totalPDFPages = Math.ceil(htmlHeight / pdfHeight) - 1;

    const data = document.getElementById('idcard_main');
    html2canvas(data, { allowTaint: true }).then(canvas => {

      canvas.getContext('2d');
      const imgData = canvas.toDataURL("image/jpeg", 1.0);
      let pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);
      pdf.addImage(imgData, 'png', topLeftMargin, topLeftMargin, canvasImageWidth, canvasImageHeight);

      for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage([pdfWidth, pdfHeight], 'p');
        pdf.addImage(imgData, 'png', topLeftMargin, - (pdfHeight * i) + (topLeftMargin * 4), canvasImageWidth, canvasImageHeight);
      }

      pdf.save(`Document ${new Date().toLocaleString()}.pdf`);
    });
  }

Nikita · Accepted Answer · 2019-12-04 04:16:26Z

0

I got the solution from a tutorial. Posting it here since it may help someone else.

Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

answered Dec 4, 2019 at 4:16

Nikita

551 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

how to export a angular page into pdf with multiple page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related