1
我正在使用D3.js呈现SVG中的条形图,但我无法将完整图形init导出为PDF,就像在HTML5画布中呈现的其他图形一样。我怎么做?如何使用html canvas将SVG图导出为pdf
(function(){
var
form = $('.form'),
cache_width = form.width(),
a4 =[ 1100.28, 580.89]; // for a4 size paper width and height
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
var imgData = canvas.toDataURL('image/png');
/*
Here are the numbers (paper width and height) that I found to work.
It still creates a little overlap part between the pages, but good enough for me.
if you can find an official number from jsPDF, use them.
*/
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth/canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('datamagnified_AE.pdf');
});
}
// create canvas object
function getCanvas(){
form.width((a4[0]*1.33333) -80).css('max-width','none');
return html2canvas(form,{
imageTimeout:2000,
removeContainer:true
});
}
}());
请在代码中添加一些注释。它是如何成功地将html5画布图转换为PDF,或者您如何尝试使用SVG或两者或其他方式来完成此操作? – YakovL