Javascript 使用jsPDF将extJS面板内容导出为PDF
我正在尝试将ExtJS面板内容导出为PDF格式。该面板包含少量动态添加的ExtJS和HTML组件Javascript 使用jsPDF将extJS面板内容导出为PDF,javascript,pdf,extjs,extjs4,jspdf,Javascript,Pdf,Extjs,Extjs4,Jspdf,我正在尝试将ExtJS面板内容导出为PDF格式。该面板包含少量动态添加的ExtJS和HTML组件 me.outputFramePanel = Ext.create('Ext.panel.Panel', { region: 'center', autoScroll: true, layout: { type: 'vbox', align: 'stretch ', pack: 'center' }, style:
me.outputFramePanel = Ext.create('Ext.panel.Panel', {
region: 'center',
autoScroll: true,
layout: {
type: 'vbox',
align: 'stretch ',
pack: 'center'
},
style: 'margin:10px 20px 10px 20px;'
});
数据已按以下方式添加到面板中
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;
但不是$('#render_me').get(0),我想放置me.outputFramePanel,应该能够以PDF格式导出数据
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
doc.fromHTML($('#render_me').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
请帮忙
另外,jsPDF支持日语字符吗
感谢和问候,
斯图经过努力找到了这个。为了使其工作,您需要将代码放在HTMLiFrame中,并使其作为一个有益的工具提供。 这意味着您不能动态创建HTML主体并向其添加组件。在单独的Javascript文件中创建组件,并添加到创建的HTML中。 在创建如下html时使用双引号-它不能使用单引号,在这里添加元素也会失败,不会导致错误和输出
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>";
var innerHtml=“”+
“报告”+
"" +
""+
""+
""+
""+
"";
现在将其作为iFrames srcdoc添加到您的Ext面板
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>'
});
me.outputFramePanel.add({
宽度:me.framePanelWidth,
bodyStyle:“溢出-x:隐藏;溢出-y:自动”,
样式:“边框:1px实心#b7bcc4;”,
高度:“100%”,
html:'
});
现在调用document.getElementById('frameReportPanel')并在其上打印jsPDF
不,它不支持日语字符集
仅供参考,我没有在我的应用程序中使用iFrame或jsPDF,这是一个很好的工具,但我需要语言支持,而是选择了printfelement->
我希望这会有帮助。:) 有jsPDF的替代方案吗?尝试将
$(“#render_me”).get(0)
替换为me.outputFramePanel.el.dom
。它正在执行,但PDF是空的,没有任何内容。