I am trying to export ExtJS panel content into a PDF format. The panel contains few ExtJS and HTML components which get added dynamically.
me.outputFramePanel = Ext.create('Ext.panel.Panel', {
region: 'center',
autoScroll: true,
layout: {
type: 'vbox',
align: 'stretch ',
pack: 'center'
},
style: 'margin:10px 20px 10px 20px;'
});
The data has been added to the panel in the following way.
for (var i=0;i<imgsArr.length;i++){
var image = Ext.create('Ext.Img', {
src: imgsArr[i].src,
width: 750,
height: 500
});
}
me.outputFramePanel.insert(me.itemIndex, image);
me.itemIndex+=me.itemIndex;
What I am trying to do is, onClick of an Export button, the Ext panel data should get exported in PDF format.
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
doc.fromHTML($('#render_me').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
https://parall.ax/products/jspdf
But instead of $('#render_me').get(0) i want to put me.outputFramePanel and should be able to export data in PDF format.
Please help!
Also, does jsPDF support Japanese characters?
Thanks and regards, Stu
After a lot of effort found this. In order to make it work, You need to put the code in HTML iframe and make it available as a wholesome. Meaning you cannot dynamically create HTML body and add your components to it. Create your components in a separate Javascript file and add to the HTML created. Use double-quotes when creating html something like below - It won't work with single quotes and adding elements here will also fail resulting in no errors and no output.
var innerHtml = "<!DOCTYPE html><html><head>" +
"<meta http-equiv='X-UA-Compatible' content='IE=edge'/><title>Report</title>"+
"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>" +
"<link rel='stylesheet' type='text/css' href='./../scripts/external/extjs/resources/css/ext-all.css'/>"+
"<script type='text/javascript' src='./../scripts/external/extjs/js/ext-all.js'></script>"+
"<script type='text/javascript' src='./../scripts/external/jquery.min.1.9.1.js'></script>"+
"<script type='text/javascript' src='./../scripts/app/view/myjavascriptComponentsfile.js'></script>"+
"</head><body></body></html>";
Now add it to your Ext Panel as iFrames srcdoc.
me.outputFramePanel.add({
width: me.framePanelWidth,
bodyStyle : 'overflow-x:hidden; overflow-y:auto',
style: 'border:1px solid #b7bcc4;',
height:"100%",
html: '<iframe id="frameReportPanel" name="frameReportPanelName" align="middle" scrolling="no" frameborder=0 name="frame"'+
' width="'+ me.framePanelWidth + '" height="'+ me.framePanelHeight +'" srcdoc="'+ innerHtml +'"></iframe>'
});
Now call document.getElementById('frameReportPanel') and do the jsPDF print on it.
And no, it doesn't support Japanese character set.
FYI, I didn't use iFrame or jsPDF in my application, it's a good tool but I required language support, instead I went for printElement -> http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
I hope it's helpful. :)