有什么办法可以在svg旁边和svg一起下载html表？

Question

I am using d3.js to create a pie diagram to show the coverage of a particular industry and just beside the svg I have an html table to represent the different colors for different industries. I used canvas.toBlob() to download the svg as a png. Is there any way to download the html along with the svg.

 $('#downloadHeatMap') .click( function() { if (!isIE && (width > 32767 || height > 32767)) { alert("Unable to download, Image width/height limit exceeded"); } else if (isIE && (width > 8192 || height > 8192)) { alert("Unable to download, Image width/height limit exceeded"); } else if (isChrome && (width * height) > 268435456) { alert("Unable to download, Image width/height limit exceeded"); } else if (isFirefox && (width * height) > 472907776) { alert("Unable to download, Image width/height limit exceeded"); } else { var html = d3.select("svg").attr("version", 1.1).attr( "xmlns", "http://www.w3.org/2000/svg").node().parentNode.innerHTML; var svg = $('svg').parent().html(); var canvas = document.querySelector("canvas"); context = canvas.getContext("2d"); canvas.width = width + 100; canvas.height = height + 50; canvg(document.getElementById('drawingArea'), html); canvas.toBlob(function(blob) { saveAs(blob, "heatMapDiagram.png"); }); } }); 

Here is the table i have beside the svg

 <div class="pure-pusher-container"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 text-center"> <h1 ><span class="pull-right">Industry Distribution Map</span></h1> </div> <div class="col-md-2 col-md-offset-2"> <input type="button" value="Download Heatmap" class="btn btn-primary" style="margin-top: 20px;" id="downloadHeatMap"> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-md-10" id="heatMapDiv"><span class="pull-right" id="vis"></span></div> <div class="col-md-2" style="margin-top: 40px;"> <table class="table"> <thead> <tr> <th>Color</th> <th >% Coverage</th> </tr> </thead> <tbody> <tr> <td style="background-color:#FF4242;"></td> <td> 0 </td> </tr> <tr> <td style="background-color:#B84C4C;"></td> <td> 1 - 20</td> </tr> <tr> <td style="background-color:#de783b;"></td> <td> 21 - 40</td> </tr> <tr> <td style="background-color:#BC9BE0;"></td> <td> 41 - 60</td> </tr> <tr> <td style="background-color:#5687d1;"></td> <td> 61 - 80</td> </tr> <tr> <td style="background-color:#6ab975;"></td> <td> 81 - 100</td> </tr> </tbody> </table> </div> </div> </div> </div> 

Is there any way to save the html table along with my svg as a png ?

Answer 1

First create a DOM element that contains both the table and the chart, side by side. Then you can use the html2canvas JavaScript library to screenshot that entire DOM element into a canvas element, and then download it as a png to the user's computer:

html2canvas(document.getElementById("yourContainerID"), {
  onrendered: function(canvas) {
    canvas.toBlob(function(blob) {
        saveAs(blob, "heatMapDiagram.png");
    });
  }
});