我在这里使用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;
};