Xtykutl

I am using jspdf here.

I am getting a blank page while downloading the pdf.

When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf.

Everything is working but a blank page is coming at last of the page.

Here is my live demo in plunker. also here I have the html and javascript code

html

<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>

 <input type="button" id="download"  value="download" /> click to console

  <div><button id="button1" class="button1">submit1</button></div>

  <p id="bottom-content">footer</p>

script

$(document).ready(function() {

    var index = 0;

    var id = ;

    $('#button1').on('click', function() {

        $('body').append($("<div id='chart" + index + "'></div>"));



        Highcharts.chart('chart' + index, {

           title: {

        text: 'Chart-'+index+''

    },

            series: [{

                data: [1, 2, 3]

            }]

        });

        var temp = "chart" + index + "";

        console.log(temp);

        id.push(temp);



        index++;

    });



    $('#download').on('click', function() {

console.log(id);

  var doc = new jsPDF('portrait', 'pt', 'a4', true);

  var elementHandler = {

    '#ignorePDF': function(element, renderer) {

      return true;

    }

  };



  var source = document.getElementById("logo");

  doc.fromHTML(source, 15, 15, {

    'width': 200,

    'elementHandlers': elementHandler

  });



  var DOMURL = window.URL || window.webkitURL || window;

   var elements = id;



 // console.log(xx);

  for (let i in elements) {





      let svg = document.querySelectorAll('svg');

      let canvas = document.createElement('canvas');

      let canvasIE = document.createElement('canvas');

      let context = canvas.getContext('2d');



      let data1 = (new XMLSerializer()).serializeToString(svg[i]);



      canvg(canvas, data1);

      let svgBlob = new Blob([data1], {

        type: 'image/svg+xml;charset=utf-8'

      });



      let url = DOMURL.createObjectURL(svgBlob);



      let img = new Image();

      img.src = url;

      img.onload = function() {

        context.canvas.width = $("#"+elements[i]).find('svg').width();

        context.canvas.height = $("#"+elements[i]).find('svg').height();



        context.drawImage(img, 0, 0);

        // freeing up the memory as image is drawn to canvas

        DOMURL.revokeObjectURL(url);



        var dataUrl;

        if (isIEBrowser()) { // Check of IE browser 

          var svg = $(elements[i]).highcharts().container.innerHTML;

          canvg(canvasIE, svg[i]);

          dataUrl = canvasIE.toDataURL('image/JPEG');

        } else {

          dataUrl = canvas.toDataURL('image/jpeg');

        }



        doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);



          let bottomContent = document.getElementById("bottom-content");

  doc.fromHTML(bottomContent, 15, 700, {

    'width': 560,

    'elementHandlers': elementHandler

  });



  let logo = document.getElementById("logo");

         doc.fromHTML(logo, 15, 200, {

    'width': 560,

    'elementHandlers': elementHandler

  });



  doc.addPage();



      };







    }





  setTimeout(function() {

    doc.save('TestChart"'+index+'".pdf');

  }, 1000);



});

});

function isIEBrowser() {

  var ieBrowser;

  var ua = window.navigator.userAgent;

  var msie = ua.indexOf("MSIE ");



  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer

  {

    ieBrowser = true;

  } else //Other browser

  {

    console.log('Other Browser');

    ieBrowser = false;

  }



  return ieBrowser;

};

You can get the number of pages present in the document and then delete the last page

The following line will give you the number of pages present in the document:

var pageCount = doc.internal.getNumberOfPages();

The following code can be used to delete last page from the document:

doc.deletePage(pageCount)

Hope this helps!!