使用 jsPDF 将 extJS 面板内容导出为 PDF
Export extJS Panel content into PDF using jsPDF
我正在尝试将 ExtJS 面板内容导出为 PDF 格式。该面板包含一些动态添加的 ExtJS 和 HTML 组件。
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;
我想做的是,单击“导出”按钮时,Ext 面板数据应该以 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
});
https://parall.ax/products/jspdf
但是我想输入 me.outputFramePanel 而不是 $('#render_me').get(0) 并且应该能够以 PDF 格式导出数据。
请帮忙!
另外,jsPDF支持日文吗?
感谢和问候,
斯图
经过一番努力才找到这个。为了使其正常工作,您需要将代码放在 HTML iframe 中并使其整体可用。
这意味着您不能动态创建 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>";
现在将其作为 iFrame 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>'
});
现在调用 document.getElementById('frameReportPanel') 并在其上打印 jsPDF。
不,它不支持日语字符集。
仅供参考,我没有在我的应用程序中使用 iFrame 或 jsPDF,这是一个很好的工具,但我需要语言支持,而是我选择了 printElement -> http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
希望对您有所帮助。 :)
我正在尝试将 ExtJS 面板内容导出为 PDF 格式。该面板包含一些动态添加的 ExtJS 和 HTML 组件。
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;
我想做的是,单击“导出”按钮时,Ext 面板数据应该以 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
});
https://parall.ax/products/jspdf
但是我想输入 me.outputFramePanel 而不是 $('#render_me').get(0) 并且应该能够以 PDF 格式导出数据。
请帮忙!
另外,jsPDF支持日文吗?
感谢和问候, 斯图
经过一番努力才找到这个。为了使其正常工作,您需要将代码放在 HTML iframe 中并使其整体可用。 这意味着您不能动态创建 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>";
现在将其作为 iFrame 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>'
});
现在调用 document.getElementById('frameReportPanel') 并在其上打印 jsPDF。
不,它不支持日语字符集。
仅供参考,我没有在我的应用程序中使用 iFrame 或 jsPDF,这是一个很好的工具,但我需要语言支持,而是我选择了 printElement -> http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
希望对您有所帮助。 :)