使用 jsPDF 将 extJS Panel 内容导出为 PDF答案

【问题标题】：Export extJS Panel content into PDF using jsPDF使用 jsPDF 将 extJS Panel 内容导出为 PDF
【发布时间】：2015-10-16 10:21:56
【问题描述】：

我正在尝试将 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

但不是 $('#render_me').get(0) 我想放 me.outputFramePanel 并且应该能够以 PDF 格式导出数据。

请帮忙！

另外，jsPDF 是否支持日文字符？

感谢和问候，斯图

【问题讨论】：

jsPDF 的任何替代品？
尝试用me.outputFramePanel.el.dom替换$('#render_me').get(0)。
它正在执行，但 PDF 是空的，里面什么都没有。

标签： javascript pdf extjs extjs4 jspdf

【解决方案1】：

费了好大劲才找到这个。为了使其工作，您需要将代码放在 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>";

现在将它作为 iFrames srcdoc 添加到您的 Ext Panel。

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/

希望对您有所帮助。 :)

【讨论】：