如何导出多个html表格和多个d3生成的图形成一个单一的pdf

How to export multiple html tables and multiple d3 generated graphs into a single pdf

本文关键字：一个 pdf 单一 图形 html 何导出 表格 d3      更新时间：2023-09-26

基本上我在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是好的

http://plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9?p =预览

相关文章：