javascript - 有什么方法可以将 svg 旁边的 html 表格与 svg 一起下载吗？

Question

我正在使用 d3.js 创建一个饼图来显示特定行业的覆盖范围，在 svg 旁边我有一个 html 表格来表示不同行业的不同颜色。我使用 canvas.toBlob() 将 svg 下载为 png。有什么办法可以将 html 与 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");
                    });
                }
            });

这是我在 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>

有什么方法可以将 html 表格与我的 svg 一起保存为 png 吗？

Answer 1

首先创建一个并排包含表格和图表的 DOM 元素。然后您可以使用html2canvas JavaScript 库将整个 DOM 元素屏幕截图到 Canvas 元素中，然后将其作为 png 下载到用户的计算机:

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