[英]How to export multiple html tables and multiple d3 generated graphs into a single pdf
基本上,我有多個用html生成的表(數據也可能取決於數據庫中的數據量,因此我希望pdf上的表也可伸縮,這意味着沒有固定的大小。)另外,我有d3生成的圖形也在同一頁面上。
我想知道的是..有什么辦法可以將頁面上顯示的所有內容轉換為pdf文件(如屏幕截圖)嗎? 我知道有phantomJS,但是它要求您在本地環境上安裝和部署,我們的項目不允許這樣做。.那么,我可以導入和使用任何第三方庫將它們導出到單個PDF嗎?
請幫忙
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對齊和css是好的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.