我正在使用Morris.js在我的应用程序上生成图形，现在我要求生成的图形应保存为PDF文件并需要将该文件下载到客户端
这是我编写的用于生成PDF的代码
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"type="text/javascript"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js" type="text/javascript"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js" type="text/javascript"></script>
标题中的Javascript：
<script type="text/javascript">
function demoFromHTML() {
debugger;
alert("sada");
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, {// y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}
, margins);
}
</script>
这是Body上的HTML内容：
//生成PDF文件的按钮
<button onclick="javascript:demoFromHTML()">PDF</button>
//这是morris图表生成的div
<div id="GraphCallbackMeanTime" class="chart no-padding" style="position: relative;"></div>
//这是我们将在执行morris图表后得到的内容
<div id="GraphCallbackMeanTime" class="chart no-padding" style="position: relative;">
<svg height="220" version="1.1" width="493" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.984375px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Rapha�l 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><text x="32.53125" y="177" text-anchor="end" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">0</tspan></text><path fill="none" stroke="#aaaaaa" d="M45.03125,177H468" stroke-width="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="32.53125" y="138.94126738794435" text-anchor="end" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="3.9959548879443503" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">162</tspan></text><path fill="none" stroke="#aaaaaa" d="M45.03125,138.94126738794435H468" stroke-width="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="32.53125" y="100.88253477588871" text-anchor="end" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="3.9997222758887148" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">324</tspan></text><path fill="none" stroke="#aaaaaa" d="M45.03125,100.88253477588871H468" stroke-width="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="32.53125" y="63.05873261205565" text-anchor="end" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4.00404511205565" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">485</tspan></text><path fill="none" stroke="#aaaaaa" d="M45.03125,63.05873261205565H468" stroke-width="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="32.53125" y="25" text-anchor="end" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">647</tspan></text><path fill="none" stroke="#aaaaaa" d="M45.03125,25H468" stroke-width="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="445.34095982142856" y="192" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">SAM'S CLUB</tspan></text><text x="339.59877232142856" y="192" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">90045</tspan></text><text x="233.85658482142858" y="192" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">EVERETT</tspan></text><text x="113.00837053571429" y="192" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#888888" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial;" font-size="12px"><tspan dy="192" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></tspan></text><rect x="51.82896205357143" y="160.78979907264298" width="1.5106026785714288" height="16.210200927357022" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="66.93498883928571" y="160.78979907264298" width="1.5106026785714288" height="16.210200927357022" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="82.041015625" y="160.78979907264298" width="1.5106026785714288" height="16.210200927357022" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="97.14704241071429" y="160.78979907264298" width="1.5106026785714288" height="16.210200927357022" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="112.25306919642857" y="160.78979907264298" width="1.5106026785714288" height="16.210200927357022" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="127.35909598214286" y="151.86244204018547" width="1.5106026785714288" height="25.13755795981453" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="142.46512276785714" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="157.57114955357142" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="172.6771763392857" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="187.783203125" y="173.94590417310664" width="1.5106026785714288" height="3.0540958268933593" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="202.88922991071428" y="165.2534775888717" width="1.5106026785714288" height="11.746522411128296" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="217.99525669642856" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="233.10128348214286" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="248.20731026785714" y="167.3678516228748" width="1.5106026785714288" height="9.63214837712519" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="263.31333705357144" y="142.46522411128285" width="1.5106026785714288" height="34.53477588871715" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="278.4193638392858" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="293.525390625" y="174.1808346213292" width="1.5106026785714288" height="2.819165378670789" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="308.63141741071433" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="323.7374441964286" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="338.8434709821429" y="155.1514683153014" width="1.5106026785714288" height="21.8485316846986" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="353.94949776785717" y="144.8145285935085" width="1.5106026785714288" height="32.1854714064915" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="369.05552455357144" y="156.32612055641422" width="1.5106026785714288" height="20.673879443585776" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="384.1615513392857" y="151.86244204018547" width="1.5106026785714288" height="25.13755795981453" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="399.26757812500006" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="414.37360491071433" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="429.4796316964286" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="444.5856584821429" y="162.66924265842349" width="1.5106026785714288" height="14.330757341576515" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="459.69168526785717" y="25" width="1.5106026785714288" height="152" r="0" rx="0" ry="0" fill="#4190df" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect></svg><div class="morris-hover morris-default-style" style="left: 21.1902901785714px; top: 93px;">
<div class="morris-hover-row-label"></div><div class="morris-hover-point" style="color: #000">
MeanTime:
69
</div>
</div>
</div>
但我无法生成PDF文件，请帮助如何将Morris图表导出为PDF文件