[英]How to export multiple html tables and multiple d3 generated graphs into a single pdf
Basically I have multiple tables that are generated in html (also the data may vary depends on how much data are in the database, so I want the tables on pdf to be scalable as well, meaning no fixed size.) In addition, I have a d3 generated graph too on the same page. 基本上,我有多个用html生成的表(数据也可能取决于数据库中的数据量,因此我希望pdf上的表也可伸缩,这意味着没有固定的大小。)另外,我有d3生成的图形也在同一页面上。
What I want to know is..is there any way to turn everything displayed on the page into a pdf like a screenshot? 我想知道的是..有什么办法可以将页面上显示的所有内容转换为pdf文件(如屏幕截图)吗? I know there is phantomJS but it requires you to install and deploy on the local environment, and our project won't allow it.. so is there any 3rd party libraries that I can import and use to export them into a single PDF?
我知道有phantomJS,但是它要求您在本地环境上安装和部署,我们的项目不允许这样做。.那么,我可以导入和使用任何第三方库将它们导出到单个PDF吗?
Please help 请帮忙
Using SaveSvg.js
https://gist.github.com/enjoylife/0ae74717a29862c5d8c5
and using jspdf was able to make it work
d3.select("#save").on("click", function(){
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
//save and serve it as an actual filename
binaryblob();
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvas.toDataURL("image/png");
/* Added as png to jspdf */
var doc = new jsPDF();
doc.addImage( a.href, "png", 0,0);
doc.save("test.pdf");
var pngimg = '<img src="'+a.href+'">';
d3.select("#pngdataurl").html(pngimg);
a.click();
};
});
jspdf alignment and css is good jspdf对齐和css是好的
http://plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9?p=preview http://plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.