Javascript 当我下载带有动态ID的pdf时，我使用jspdf在pdf中获得相同的highchart

我正在使用jspdf捕获Hichchart的内容，它使用动态id onclick动态生成。在这里，当我单击submit1按钮时，将生成不同的highchart（动态id）。再次单击download（下载）按钮时，它将下载pdf格式的动态创建的图表内容。我可以下载，但相同的图表将再次下载，而不是页面上的不同图表。我已经在这里更新了演示代码

---

，任何人都可以帮助我，我只是把html和javascript代码放在这里

html

点击控制台
提交1

script.js

$（文档）.ready（函数（）{
var指数=0；
var id=[]；
$（'#button1'）。在（'click'，function（）上{
$（'body'）。追加（$（“”）；
Highcharts.图表（'图表'+索引{
标题：{
文本：“图表-”+索引+“”
},
系列：[{
数据：[1,2,3]
}]
});
var temp=“图表”+索引+”；
控制台日志（temp）；
id.push（温度）；
索引++；
});
$（'#下载'）。在（'单击'，函数（）上）{
console.log（id）；
var doc=新的jsPDF（“纵向”、“pt”、“a4”为真）；
var elementHandler={
“#ignorePDF”：函数（元素、渲染器）{
返回true；
}
};
var source=document.getElementById（“顶级内容”）；
fromHTML文件（来源，15，15{
“宽度”：560，
“elementHandler”：elementHandler
});
var DOMURL=window.URL | | window.webkitURL | | window；
var元素=id；
//控制台日志（xx）；
for（让我输入元素）{
console.log（元素[i]）；
var svg=document.querySelector（'svg'）；
var canvas=document.createElement（'canvas'）；
var canvasIE=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
var data1=（新的XMLSerializer（））.serializeToString（svg）；
canvg（画布，数据1）；
var svgBlob=新Blob（[data1]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svgBlob）；
var img=新图像（）；
img.onload=函数（）{
context.canvas.width=$（“#”+元素[i]）.find（'svg'）.width（）；
context.canvas.height=$（“#”+元素[i]）.find（'svg'）.height（）；
drawImage（img，0,0）；
//将图像绘制到画布时释放内存
revokeObjectURL（url）；
var-dataUrl；
如果（isIEBrowser（））{//检查IE浏览器
var svg=$（元素[i]）.highcharts（）.container.innerHTML；
canvg（canvasIE，svg）；
dataUrl=canvasIE.toDataURL（'image/JPEG'）；
}否则{
dataUrl=canvas.toDataURL（'image/jpeg'）；
}
addImage文件（dataUrl，'JPEG'，20150560350）；
var bottomContent=document.getElementById（“底部内容”）；
fromHTML文件（bottomContent，15700{
“宽度”：560，
“elementHandler”：elementHandler
});
fromHTML文件（来源，15，15{
“宽度”：560，
“elementHandler”：elementHandler
});
doc.addPage（）；
};
img.src=url；
}
setTimeout（函数（）{
doc.save（'TestChart.pdf'）；
}, 2000);
});
});
函数isIEBrowser（）{
变量浏览器；
var ua=window.navigator.userAgent；
变量msie=ua.indexOf（“msie”）；
如果（msie>0 | |！！navigator.userAgent.match（/Trident.*rv \：11\./）//Internet Explorer
{
ieBrowser=true；
}else//其他浏览器
{
console.log（“其他浏览器”）；
ieBrowser=false；
}
返回浏览器；
};

我在您的代码中发现了两个问题

首先，使用

document.querySelector（'svg'）

只返回第一个svg元素-您应该使用

document.querySelectorAll（'svg'）svg[i]

其次，您的代码中似乎存在异步问题—帮助将所有声明

var

更改为

let

---

现场演示：

当您有两张使用提交按钮的图表，然后单击下载按钮时，会发生什么情况，请任何人帮助我？它应该生成最后一张图表的pdf，或者它应该生成两张图表的pdf？两张图表的pdf谢谢你的帮助我还需要一个帮助我可以将图像作为徽标放到每个页面上吗？我在循环中尝试了，但图像没有出现，文本出现了，但图像没有出现，让图像=document.getElementById（“图像”）；fromHTML（源代码，15，15，{'width'：560，'elementHandlers'：elementHandler}）；内部循环我添加了我已经在我的项目应用程序中的html内部div id'image'Hi carreankush中有图像，请给我提供一个实例。我在这个插件中进行了更新，这里页脚显示在每个页面中，但图像并没有显示在所有页面中，我已经使用了let logo=document.getElementById（“logo”）；fromHTML（logo，15200，{'width'：560，'elementHandlers'：elementHandler}）；和页脚一样。你能帮我吗。我试过了，但没有得到解决Hi carreankush，你已经解决这个问题了吗？您在示例中的描述表明您已经解决了它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="jspdf.debug.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="https://github.com/devongovett/pdfkit/releases/download/v0.6.2/pdfkit.js"></script>
  <script src="rgbcolor.js"></script>
  <script src="canvg.js"></script>
  <script src="script.js"></script>

  <input type="button" id="download"  value="download" /> click to console
  <div><button id="button1" class="button1">submit1</button></div>

$(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("top-content");
  doc.fromHTML(source, 15, 15, {
    'width': 560,
    'elementHandlers': elementHandler
  });

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

 // console.log(xx);
  for (let i in elements) {
      console.log(elements[i]);
      var svg = document.querySelector('svg');
      var canvas = document.createElement('canvas');
      var canvasIE = document.createElement('canvas');
      var context = canvas.getContext('2d');

      var data1 = (new XMLSerializer()).serializeToString(svg);
      canvg(canvas, data1);
      var svgBlob = new Blob([data1], {
        type: 'image/svg+xml;charset=utf-8'
      });

      var url = DOMURL.createObjectURL(svgBlob);

      var img = new Image();
      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);
          dataUrl = canvasIE.toDataURL('image/JPEG');
        } else {
          dataUrl = canvas.toDataURL('image/jpeg');
        }

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

          var bottomContent = document.getElementById("bottom-content");
  doc.fromHTML(bottomContent, 15, 700, {
    'width': 560,
    'elementHandlers': elementHandler
  });
         doc.fromHTML(source, 15, 15, {
    'width': 560,
    'elementHandlers': elementHandler
  });
  doc.addPage();
      };

      img.src = url;

    }


  setTimeout(function() {
    doc.save('TestChart.pdf');
  }, 2000);

});
});
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;
};