Я использую jspdf для захвата содержимого Hichchart, которое генерируется динамически с динамическим идентификатором onclick. Здесь, когда я нажимаю кнопку submit1, генерируется другая старшая диаграмма с динамическим идентификатором. Снова, когда я нажимаю кнопку загрузки, она загружает динамически созданное содержимое диаграммы в формате pdf. Я могу загружать, но та же самая диаграмма загружается снова вместо другой диаграммы на странице. Я обновил код для демонстрации здесь
http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview, Может кто-нибудь, пожалуйста, помогите мне, я просто помещаю HTML и код JavaScript здесь.
HTML
<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>
script.js
$(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;
};