JSPDF - 如何删除 PDF 下载中的空白最后一页

Question

我在这里使用jspdf。
当我下载pdf时，会得到一个空白页面。
当您单击submit1按钮时，图表将生成，当您按下download按钮时，这些图表将被下载为pdf。
一切都正常工作，但是页面最后出现了一个空白页。
这是我的plunker实时演示。这里也有html和javascript代码。

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>

脚本

$(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;
};

- carreankush

Answer 1

你可以获取文档中页面的数量，然后删除最后一页。

以下代码可获取文档中页面的数量：

var pageCount = doc.internal.getNumberOfPages();

以下代码可以用来删除文档中的最后一页：

doc.deletePage(pageCount)

希望这能帮到您！

- Suhas NM

---

你找到了你想要的答案吗？ - Suhas NM

是的，谢谢您的帮助。我还需要帮助，我需要在下载PDF的所有页面上显示徽标，现在只显示在第一页。 - carreankush

你可以添加一个自定义函数来添加新页面，并在该函数中处理该页面的所有页眉/页脚要求...类似于-- addNewPage(pageNo) { //在此处添加图像的代码 } - Suhas NM

在任何需要调用“doc.addPage（）”方法的地方，调用addNewPage（）{ //添加徽标的代码... doc.addPage（）}。 - Suhas NM

我没有得到，我已经在循环内进行了编辑，但是页面上没有显示标志 pageCount = doc.internal.getNumberOfPages(); function addNewPage(pageCount) { let source = document.getElementById("top-content"); doc.fromHTML(source, 15, 15, { 'width': 200, 'elementHandlers': elementHandler }); } doc.addPage(addNewPage); 请问您能否在 plunker 中进行编辑。 - carreankush