Jspdf: How to set top and bottom margin in multiple pages using addHTML

[rhdave96]

I have used plugin add HTML and JSPDF

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

            var pdf = new jsPDF( 'p', 'mm', [400, 455]);       
            var specialElementHandlers = {
            '#abc': function (element, renderer) {
                return true;
                }
            };
            margins = {
                bottom:10,
                top:10,
                left:10,
                right:10
           };
        pdf.addHTML(document.getElementById('exportthis'), 10, 10, {pagesplit: true },
               function(dispose){
                var pageCount = pdf.internal.getNumberOfPages(); 
                for(i = 0; i < pageCount; i++) { 
                pdf.setPage(i); 
                pdf.text(195,450, pdf.internal.getCurrentPageInfo().pageNumber + "/" + pageCount +"\n");   
             }
           pdf.save("Report.pdf");
        },margins);

[Uzlopak]

This wont work... jsPDF does not know where to "cut" the image.

[rhdave96]

@arasabbasi it's working for me. btw thx for the response.

[nithinpeter191]

@rhdave96 how did u made it worked ?

[Shekhar12121]

@rhdave96 how did u made it worked?

@rhdave96 he is lying...

[andrushkodmytro]

I cut images for every page
const input = document.getElementById(id);

    html2canvas(input, { useCORS: true, allowTaint: true, scrollY: 0 }).then((canvas) => {
      const image = { type: 'jpeg', quality: 0.98 };
      const margin = [0.5, 0.5];
      const filename = 'myfile.pdf';

      var imgWidth = 8.5;
      var pageHeight = 11;

      var innerPageWidth = imgWidth - margin[0] * 2;
      var innerPageHeight = pageHeight - margin[1] * 2;

      // Calculate the number of pages.
      var pxFullHeight = canvas.height;
      var pxPageHeight = Math.floor(canvas.width * (pageHeight / imgWidth));
      var nPages = Math.ceil(pxFullHeight / pxPageHeight);

      // Define pageHeight separately so it can be trimmed on the final page.
      var pageHeight = innerPageHeight;

      // Create a one-page canvas to split up the full image.
      var pageCanvas = document.createElement('canvas');
      var pageCtx = pageCanvas.getContext('2d');
      pageCanvas.width = canvas.width;
      pageCanvas.height = pxPageHeight;

      // Initialize the PDF.
      var pdf = new jsPDF('p', 'in', [8.5, 11]);

      for (var page = 0; page < nPages; page++) {
        // Trim the final page to reduce file size.
        if (page === nPages - 1 && pxFullHeight % pxPageHeight !== 0) {
          pageCanvas.height = pxFullHeight % pxPageHeight;
          pageHeight = (pageCanvas.height * innerPageWidth) / pageCanvas.width;
        }

        // Display the page.
        var w = pageCanvas.width;
        var h = pageCanvas.height;
        pageCtx.fillStyle = 'white';
        pageCtx.fillRect(0, 0, w, h);
        pageCtx.drawImage(canvas, 0, page * pxPageHeight, w, h, 0, 0, w, h);

        // Add the page to the PDF.
        if (page > 0) pdf.addPage();
        debugger;
        var imgData = pageCanvas.toDataURL('image/' + image.type, image.quality);
        pdf.addImage(imgData, image.type, margin[1], margin[0], innerPageWidth, pageHeight);
      }

      pdf.save();

[rhdave96]

@nithinpeter191 Sorry for too late response .
I have changed in my jspdf.js file .. configuration changes in Thais file and set of some changes and path ..like : path changes and canvas configuration

[rhdave96]

@Shekhar12121 also check my comment .
And btw i am not lying and if you solved it then please comment and prove you are solved this problem..😀

[mounikathota]

@rhdave96 can you please post your working solution?

Did anyone find a solution for this?

[miriankakhidze]

@MrRio any update?