jspdf在动态添加多个图像时显示空白Pdf
jspdf displays Blank Pdf when adding multiple Images dynamically
我有以下代码使用 jspdf 将 svg 数据插入 png 并将图像插入 pdf 但是当我保存 pdf 时它没有数据。
我的HTML代码是这样的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="svg-container" class="Con_graph Con_graph0">
<span id="myChartId43000000" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1820" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="3A0CB5D9-41AB-4F60-823B-A3CCCD70D675"><rect x="136" y="16" width="392" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1821-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1828-canvas"><rect x="135.5" y="15.5" width="393" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="136" y="16" width="392" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1831-axisbottom"><g class="raphael-group-1834-y-axis-bands"></g><g class="raphael-group-1840-x-axis-bands"><rect x="214.4" y="16" width="78.4" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="371.2" y="16" width="78.40000000000003" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1846-x-axis-bands"></g><g class="raphael-group-1836-y-axis-lines"></g><g class="raphael-group-1842-x-axis-lines"><path d="M214.4,16L214.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M292.8,16L292.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M371.2,16L371.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M449.6,16L449.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1848-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="130" y="81" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="130">www.google.com</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="136" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="136">0</tspan></text><text class="fusioncharts-label" fill="#000000" x="214.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="214.4">3</tspan></text><text class="fusioncharts-label" fill="#000000" x="292.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="292.8">6</tspan></text><text class="fusioncharts-label" fill="#000000" x="371.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="371.2">9</tspan></text><text class="fusioncharts-label" fill="#000000" x="449.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="449.6">12</tspan></text><text class="fusioncharts-label" fill="#000000" x="528" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="528">15</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1851-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,332,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Hits</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Domain</tspan></text></g></g><g class="raphael-group-1822-dataset"><g class="raphael-group-1867-bars" clip-path="url('#3A0CB5D9-41AB-4F60-823B-A3CCCD70D675')"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1832-axistop"><g class="raphael-group-1833-y-axis-bands"></g><g class="raphael-group-1839-x-axis-bands"></g><g class="raphael-group-1845-x-axis-bands"></g><g class="raphael-group-1835-y-axis-lines"></g><g class="raphael-group-1841-x-axis-lines"></g><g class="raphael-group-1847-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="454" y="81.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="454">12</tspan></text></g><g class="raphael-group-1823-hot"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1826-buttons"></g></svg></span>
</div>
<div id="svg-container1" class="Con_graph Con_graph0">
<span id="myChartId1997003020" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1816" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; top: -0.5px; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="832DFA8F-5E6C-48B9-B129-A5546CF4D4E8"><rect x="68" y="16" width="451" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1817-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1824-canvas"><rect x="67.5" y="15.5" width="452" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="68" y="16" width="451" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1827-axisbottom"><g class="raphael-group-1830-y-axis-bands"></g><g class="raphael-group-1836-x-axis-bands"><rect x="158.2" y="16" width="90.20000000000002" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="338.6" y="16" width="90.19999999999999" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1842-x-axis-bands"></g><g class="raphael-group-1832-y-axis-lines"></g><g class="raphael-group-1838-x-axis-lines"><path d="M158.2,16L158.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M248.4,16L248.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M338.6,16L338.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M428.8,16L428.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1844-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="48.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">LAN</tspan></text><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="113.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">VPN</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="68" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="68">0bytes</tspan></text><text class="fusioncharts-label" fill="#000000" x="158.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="158.2">572.2MB</tspan></text><text class="fusioncharts-label" fill="#000000" x="248.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="248.4">1.12GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="338.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="338.6">1.68GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="428.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="428.8">2.24GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="519" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="519">2.79GB</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1847-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,293.5,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Bytes</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Source Zone Name</tspan></text></g></g><g class="raphael-group-1818-dataset"><g class="raphael-group-1864-bars" clip-path="url('#832DFA8F-5E6C-48B9-B129-A5546CF4D4E8')"><rect x="68" y="32" width="398" height="33" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect><rect x="68" y="97" width="215" height="33" rx="0" ry="0" fill-opacity="1" fill="#81c784" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(129, 199, 132); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1828-axistop"><g class="raphael-group-1829-y-axis-bands"></g><g class="raphael-group-1835-x-axis-bands"></g><g class="raphael-group-1841-x-axis-bands"></g><g class="raphael-group-1831-y-axis-lines"></g><g class="raphael-group-1837-x-axis-lines"></g><g class="raphael-group-1843-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="470" y="48.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="470">2.47GB</tspan></text><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="287" y="113.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="287">1.33GB</tspan></text></g><g class="raphael-group-1819-hot"><rect x="68" y="32" width="398" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect><rect x="68" y="97" width="215" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1822-buttons"></g></svg></span>
</div>
<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="BlobBuilder.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/cell.js"></script>
<script src="jsPDF-master/libs/png_support/zlib.js"></script>
<script src="jsPDF-master/libs/png_support/png.js"></script>
<script src="jsPDF-master/plugins/png_support.js"></script>
<script src="jsPDF-master/plugins/standard_fonts_metrics.js"></script>
<img id="img" src="" style="display:none;"/>
<canvas id="canvastag" height="500" width="1000" style="display:none;"></canvas>
<script>
var report_containers = document.getElementsByClassName("Con_graph Con_graph0");
var pdf = new jsPDF();
for (var j = 0; j < report_containers.length; ++j) {
var elem_graph = report_containers[j];
var unformatSvgString=elem_graph.innerHTML;
svgString=unformatSvgString.substring(unformatSvgString.indexOf("<svg"),unformatSvgString.indexOf("</svg>")+6);
var url = 'data:image/svg+xml;base64,' + btoa(svgString);
console.log(url);
document.getElementById('img').setAttribute( 'src', url );
var img= document.getElementById('img');
var canvas = document.getElementById("canvastag");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.src = url;
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addPage();
pdf.addImage(png, 'PNG', 50, 50, 200, 100);
pdf.addFont('ComicSansMS', 'Comic Sans', 'normal');
pdf.setFont('Comic Sans');
pdf.text(50,50,'Hello World');
};
}
pdf.save("test.pdf");
</script>
</body>
</html>
您的代码中有几个问题：
当您使用 var img= document.getElementById('img'); 时，onload 事件不会在第二次迭代时触发，因为 onload 事件在图像元素的生命周期内只会触发一次。在每次迭代中创建新的 image 元素，例如 var img = document.createElement('img');
在 onload 事件中，我们总是会在事件触发时找到第二个 svg 元素，因为 url 的值正在被第二个 svg 元素替换。为了克服这个问题，我们可以使用闭包，其中 svg 对象的值将保留在内存中，因为闭包会记住它创建的环境。
试试这个：
function demoFromHTML() {
var report_containers = document.getElementsByClassName("Con_graph Con_graph0");
var pdf = new jsPDF();
var count = 0;
for (var j = 0; j < report_containers.length; j++) {
var elem_graph = report_containers[j];
var unformatSvgString = elem_graph.innerHTML;
svgString = unformatSvgString.substring(unformatSvgString.indexOf("<svg"), unformatSvgString.indexOf("</svg>") + 6);
var url = 'data:image/svg+xml;base64,' + btoa(svgString);
var img = document.createElement('img');
var canvas = document.getElementById("canvastag");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.onload = (function(img) {
return function() {
count++;
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addPage();
pdf.addImage(png, 'PNG', 50, 50, 200, 100);
//pdf.addFont('ComicSansMS', 'Comic Sans', 'normal');
//pdf.setFont('Comic Sans');
pdf.text(50, 50, 'Hello World');
if (count === report_containers.length) {
setTimeout(function() {
pdf.save("test.pdf");
}, 100);
}
}
})(img);
img.src = url;
}
}
<div id="svg-container" class="Con_graph Con_graph0">
<span id="myChartId43000000" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1820" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="3A0CB5D9-41AB-4F60-823B-A3CCCD70D675"><rect x="136" y="16" width="392" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1821-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1828-canvas"><rect x="135.5" y="15.5" width="393" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="136" y="16" width="392" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1831-axisbottom"><g class="raphael-group-1834-y-axis-bands"></g><g class="raphael-group-1840-x-axis-bands"><rect x="214.4" y="16" width="78.4" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="371.2" y="16" width="78.40000000000003" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1846-x-axis-bands"></g><g class="raphael-group-1836-y-axis-lines"></g><g class="raphael-group-1842-x-axis-lines"><path d="M214.4,16L214.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M292.8,16L292.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M371.2,16L371.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M449.6,16L449.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1848-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="130" y="81" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="130">www.google.com</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="136" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="136">0</tspan></text><text class="fusioncharts-label" fill="#000000" x="214.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="214.4">3</tspan></text><text class="fusioncharts-label" fill="#000000" x="292.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="292.8">6</tspan></text><text class="fusioncharts-label" fill="#000000" x="371.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="371.2">9</tspan></text><text class="fusioncharts-label" fill="#000000" x="449.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="449.6">12</tspan></text><text class="fusioncharts-label" fill="#000000" x="528" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="528">15</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1851-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,332,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Hits</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Domain</tspan></text></g></g><g class="raphael-group-1822-dataset"><g class="raphael-group-1867-bars" clip-path="url('#3A0CB5D9-41AB-4F60-823B-A3CCCD70D675')"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1832-axistop"><g class="raphael-group-1833-y-axis-bands"></g><g class="raphael-group-1839-x-axis-bands"></g><g class="raphael-group-1845-x-axis-bands"></g><g class="raphael-group-1835-y-axis-lines"></g><g class="raphael-group-1841-x-axis-lines"></g><g class="raphael-group-1847-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="454" y="81.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="454">12</tspan></text></g><g class="raphael-group-1823-hot"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1826-buttons"></g></svg></span>
</div>
<div id="svg-container1" class="Con_graph Con_graph0">
<span id="myChartId1997003020" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1816" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; top: -0.5px; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="832DFA8F-5E6C-48B9-B129-A5546CF4D4E8"><rect x="68" y="16" width="451" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1817-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1824-canvas"><rect x="67.5" y="15.5" width="452" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="68" y="16" width="451" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1827-axisbottom"><g class="raphael-group-1830-y-axis-bands"></g><g class="raphael-group-1836-x-axis-bands"><rect x="158.2" y="16" width="90.20000000000002" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="338.6" y="16" width="90.19999999999999" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1842-x-axis-bands"></g><g class="raphael-group-1832-y-axis-lines"></g><g class="raphael-group-1838-x-axis-lines"><path d="M158.2,16L158.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M248.4,16L248.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M338.6,16L338.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M428.8,16L428.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1844-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="48.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">LAN</tspan></text><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="113.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">VPN</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="68" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="68">0bytes</tspan></text><text class="fusioncharts-label" fill="#000000" x="158.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="158.2">572.2MB</tspan></text><text class="fusioncharts-label" fill="#000000" x="248.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="248.4">1.12GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="338.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="338.6">1.68GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="428.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="428.8">2.24GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="519" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="519">2.79GB</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1847-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,293.5,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Bytes</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Source Zone Name</tspan></text></g></g><g class="raphael-group-1818-dataset"><g class="raphael-group-1864-bars" clip-path="url('#832DFA8F-5E6C-48B9-B129-A5546CF4D4E8')"><rect x="68" y="32" width="398" height="33" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect><rect x="68" y="97" width="215" height="33" rx="0" ry="0" fill-opacity="1" fill="#81c784" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(129, 199, 132); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1828-axistop"><g class="raphael-group-1829-y-axis-bands"></g><g class="raphael-group-1835-x-axis-bands"></g><g class="raphael-group-1841-x-axis-bands"></g><g class="raphael-group-1831-y-axis-lines"></g><g class="raphael-group-1837-x-axis-lines"></g><g class="raphael-group-1843-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="470" y="48.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="470">2.47GB</tspan></text><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="287" y="113.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="287">1.33GB</tspan></text></g><g class="raphael-group-1819-hot"><rect x="68" y="32" width="398" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect><rect x="68" y="97" width="215" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1822-buttons"></g></svg></span>
</div>
<img id="img" src="" style="display:none;" />
<canvas id="canvastag" height="500" width="1000" style="display:none;"></canvas>
<button onclick="javascript:demoFromHTML();">PDF</button>
我有以下代码使用 jspdf 将 svg 数据插入 png 并将图像插入 pdf 但是当我保存 pdf 时它没有数据。
我的HTML代码是这样的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="svg-container" class="Con_graph Con_graph0">
<span id="myChartId43000000" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1820" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="3A0CB5D9-41AB-4F60-823B-A3CCCD70D675"><rect x="136" y="16" width="392" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1821-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1828-canvas"><rect x="135.5" y="15.5" width="393" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="136" y="16" width="392" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1831-axisbottom"><g class="raphael-group-1834-y-axis-bands"></g><g class="raphael-group-1840-x-axis-bands"><rect x="214.4" y="16" width="78.4" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="371.2" y="16" width="78.40000000000003" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1846-x-axis-bands"></g><g class="raphael-group-1836-y-axis-lines"></g><g class="raphael-group-1842-x-axis-lines"><path d="M214.4,16L214.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M292.8,16L292.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M371.2,16L371.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M449.6,16L449.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1848-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="130" y="81" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="130">www.google.com</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="136" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="136">0</tspan></text><text class="fusioncharts-label" fill="#000000" x="214.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="214.4">3</tspan></text><text class="fusioncharts-label" fill="#000000" x="292.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="292.8">6</tspan></text><text class="fusioncharts-label" fill="#000000" x="371.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="371.2">9</tspan></text><text class="fusioncharts-label" fill="#000000" x="449.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="449.6">12</tspan></text><text class="fusioncharts-label" fill="#000000" x="528" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="528">15</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1851-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,332,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Hits</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Domain</tspan></text></g></g><g class="raphael-group-1822-dataset"><g class="raphael-group-1867-bars" clip-path="url('#3A0CB5D9-41AB-4F60-823B-A3CCCD70D675')"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1832-axistop"><g class="raphael-group-1833-y-axis-bands"></g><g class="raphael-group-1839-x-axis-bands"></g><g class="raphael-group-1845-x-axis-bands"></g><g class="raphael-group-1835-y-axis-lines"></g><g class="raphael-group-1841-x-axis-lines"></g><g class="raphael-group-1847-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="454" y="81.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="454">12</tspan></text></g><g class="raphael-group-1823-hot"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1826-buttons"></g></svg></span>
</div>
<div id="svg-container1" class="Con_graph Con_graph0">
<span id="myChartId1997003020" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1816" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; top: -0.5px; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="832DFA8F-5E6C-48B9-B129-A5546CF4D4E8"><rect x="68" y="16" width="451" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1817-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1824-canvas"><rect x="67.5" y="15.5" width="452" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="68" y="16" width="451" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1827-axisbottom"><g class="raphael-group-1830-y-axis-bands"></g><g class="raphael-group-1836-x-axis-bands"><rect x="158.2" y="16" width="90.20000000000002" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="338.6" y="16" width="90.19999999999999" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1842-x-axis-bands"></g><g class="raphael-group-1832-y-axis-lines"></g><g class="raphael-group-1838-x-axis-lines"><path d="M158.2,16L158.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M248.4,16L248.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M338.6,16L338.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M428.8,16L428.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1844-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="48.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">LAN</tspan></text><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="113.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">VPN</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="68" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="68">0bytes</tspan></text><text class="fusioncharts-label" fill="#000000" x="158.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="158.2">572.2MB</tspan></text><text class="fusioncharts-label" fill="#000000" x="248.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="248.4">1.12GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="338.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="338.6">1.68GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="428.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="428.8">2.24GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="519" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="519">2.79GB</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1847-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,293.5,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Bytes</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Source Zone Name</tspan></text></g></g><g class="raphael-group-1818-dataset"><g class="raphael-group-1864-bars" clip-path="url('#832DFA8F-5E6C-48B9-B129-A5546CF4D4E8')"><rect x="68" y="32" width="398" height="33" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect><rect x="68" y="97" width="215" height="33" rx="0" ry="0" fill-opacity="1" fill="#81c784" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(129, 199, 132); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1828-axistop"><g class="raphael-group-1829-y-axis-bands"></g><g class="raphael-group-1835-x-axis-bands"></g><g class="raphael-group-1841-x-axis-bands"></g><g class="raphael-group-1831-y-axis-lines"></g><g class="raphael-group-1837-x-axis-lines"></g><g class="raphael-group-1843-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="470" y="48.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="470">2.47GB</tspan></text><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="287" y="113.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="287">1.33GB</tspan></text></g><g class="raphael-group-1819-hot"><rect x="68" y="32" width="398" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect><rect x="68" y="97" width="215" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1822-buttons"></g></svg></span>
</div>
<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="BlobBuilder.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/cell.js"></script>
<script src="jsPDF-master/libs/png_support/zlib.js"></script>
<script src="jsPDF-master/libs/png_support/png.js"></script>
<script src="jsPDF-master/plugins/png_support.js"></script>
<script src="jsPDF-master/plugins/standard_fonts_metrics.js"></script>
<img id="img" src="" style="display:none;"/>
<canvas id="canvastag" height="500" width="1000" style="display:none;"></canvas>
<script>
var report_containers = document.getElementsByClassName("Con_graph Con_graph0");
var pdf = new jsPDF();
for (var j = 0; j < report_containers.length; ++j) {
var elem_graph = report_containers[j];
var unformatSvgString=elem_graph.innerHTML;
svgString=unformatSvgString.substring(unformatSvgString.indexOf("<svg"),unformatSvgString.indexOf("</svg>")+6);
var url = 'data:image/svg+xml;base64,' + btoa(svgString);
console.log(url);
document.getElementById('img').setAttribute( 'src', url );
var img= document.getElementById('img');
var canvas = document.getElementById("canvastag");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.src = url;
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addPage();
pdf.addImage(png, 'PNG', 50, 50, 200, 100);
pdf.addFont('ComicSansMS', 'Comic Sans', 'normal');
pdf.setFont('Comic Sans');
pdf.text(50,50,'Hello World');
};
}
pdf.save("test.pdf");
</script>
</body>
</html>
您的代码中有几个问题：
当您使用 var img= document.getElementById('img'); 时，onload 事件不会在第二次迭代时触发，因为 onload 事件在图像元素的生命周期内只会触发一次。在每次迭代中创建新的 image 元素，例如 var img = document.createElement('img');
在 onload 事件中，我们总是会在事件触发时找到第二个 svg 元素，因为 url 的值正在被第二个 svg 元素替换。为了克服这个问题，我们可以使用闭包，其中 svg 对象的值将保留在内存中，因为闭包会记住它创建的环境。
试试这个：
function demoFromHTML() {
var report_containers = document.getElementsByClassName("Con_graph Con_graph0");
var pdf = new jsPDF();
var count = 0;
for (var j = 0; j < report_containers.length; j++) {
var elem_graph = report_containers[j];
var unformatSvgString = elem_graph.innerHTML;
svgString = unformatSvgString.substring(unformatSvgString.indexOf("<svg"), unformatSvgString.indexOf("</svg>") + 6);
var url = 'data:image/svg+xml;base64,' + btoa(svgString);
var img = document.createElement('img');
var canvas = document.getElementById("canvastag");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.onload = (function(img) {
return function() {
count++;
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addPage();
pdf.addImage(png, 'PNG', 50, 50, 200, 100);
//pdf.addFont('ComicSansMS', 'Comic Sans', 'normal');
//pdf.setFont('Comic Sans');
pdf.text(50, 50, 'Hello World');
if (count === report_containers.length) {
setTimeout(function() {
pdf.save("test.pdf");
}, 100);
}
}
})(img);
img.src = url;
}
}
<div id="svg-container" class="Con_graph Con_graph0">
<span id="myChartId43000000" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1820" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="3A0CB5D9-41AB-4F60-823B-A3CCCD70D675"><rect x="136" y="16" width="392" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1821-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1828-canvas"><rect x="135.5" y="15.5" width="393" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="136" y="16" width="392" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1831-axisbottom"><g class="raphael-group-1834-y-axis-bands"></g><g class="raphael-group-1840-x-axis-bands"><rect x="214.4" y="16" width="78.4" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="371.2" y="16" width="78.40000000000003" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1846-x-axis-bands"></g><g class="raphael-group-1836-y-axis-lines"></g><g class="raphael-group-1842-x-axis-lines"><path d="M214.4,16L214.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M292.8,16L292.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M371.2,16L371.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M449.6,16L449.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1848-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="130" y="81" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="130">www.google.com</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="136" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="136">0</tspan></text><text class="fusioncharts-label" fill="#000000" x="214.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="214.4">3</tspan></text><text class="fusioncharts-label" fill="#000000" x="292.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="292.8">6</tspan></text><text class="fusioncharts-label" fill="#000000" x="371.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="371.2">9</tspan></text><text class="fusioncharts-label" fill="#000000" x="449.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="449.6">12</tspan></text><text class="fusioncharts-label" fill="#000000" x="528" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="528">15</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1851-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,332,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Hits</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Domain</tspan></text></g></g><g class="raphael-group-1822-dataset"><g class="raphael-group-1867-bars" clip-path="url('#3A0CB5D9-41AB-4F60-823B-A3CCCD70D675')"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1832-axistop"><g class="raphael-group-1833-y-axis-bands"></g><g class="raphael-group-1839-x-axis-bands"></g><g class="raphael-group-1845-x-axis-bands"></g><g class="raphael-group-1835-y-axis-lines"></g><g class="raphael-group-1841-x-axis-lines"></g><g class="raphael-group-1847-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="454" y="81.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="454">12</tspan></text></g><g class="raphael-group-1823-hot"><rect x="136" y="49" width="314" height="65" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1826-buttons"></g></svg></span>
</div>
<div id="svg-container1" class="Con_graph Con_graph0">
<span id="myChartId1997003020" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"><svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1816" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; top: -0.5px; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs><linearGradient id="1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="832DFA8F-5E6C-48B9-B129-A5546CF4D4E8"><rect x="68" y="16" width="451" height="130" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-1817-background"><rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-1824-canvas"><rect x="67.5" y="15.5" width="452" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="68" y="16" width="451" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-1827-axisbottom"><g class="raphael-group-1830-y-axis-bands"></g><g class="raphael-group-1836-x-axis-bands"><rect x="158.2" y="16" width="90.20000000000002" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="338.6" y="16" width="90.19999999999999" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-1842-x-axis-bands"></g><g class="raphael-group-1832-y-axis-lines"></g><g class="raphael-group-1838-x-axis-lines"><path d="M158.2,16L158.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M248.4,16L248.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M338.6,16L338.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path><path d="M428.8,16L428.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-1844-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="48.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">LAN</tspan></text><text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="113.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"><tspan dy="5" x="62">VPN</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#000000" x="68" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="68">0bytes</tspan></text><text class="fusioncharts-label" fill="#000000" x="158.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="158.2">572.2MB</tspan></text><text class="fusioncharts-label" fill="#000000" x="248.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="248.4">1.12GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="338.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="338.6">1.68GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="428.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="428.8">2.24GB</tspan></text><text class="fusioncharts-label" fill="#000000" x="519" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"><tspan dy="-2.1875" x="519">2.79GB</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-1847-axis-name"><text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,293.5,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"><tspan dy="13.296875" x="0">Bytes</tspan></text><text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"><tspan dy="13.296875" x="0">Source Zone Name</tspan></text></g></g><g class="raphael-group-1818-dataset"><g class="raphael-group-1864-bars" clip-path="url('#832DFA8F-5E6C-48B9-B129-A5546CF4D4E8')"><rect x="68" y="32" width="398" height="33" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect><rect x="68" y="97" width="215" height="33" rx="0" ry="0" fill-opacity="1" fill="#81c784" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(129, 199, 132); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"></rect></g></g><g class="raphael-group-1828-axistop"><g class="raphael-group-1829-y-axis-bands"></g><g class="raphael-group-1835-x-axis-bands"></g><g class="raphael-group-1841-x-axis-bands"></g><g class="raphael-group-1831-y-axis-lines"></g><g class="raphael-group-1837-x-axis-lines"></g><g class="raphael-group-1843-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="470" y="48.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="470">2.47GB</tspan></text><text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="287" y="113.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"><tspan dy="5" x="287">1.33GB</tspan></text></g><g class="raphael-group-1819-hot"><rect x="68" y="32" width="398" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect><rect x="68" y="97" width="215" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-1822-buttons"></g></svg></span>
</div>
<img id="img" src="" style="display:none;" />
<canvas id="canvastag" height="500" width="1000" style="display:none;"></canvas>
<button onclick="javascript:demoFromHTML();">PDF</button>