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

Question

I am trying to export ExtJS panel content into a PDF format. 我正在尝试将ExtJS面板内容导出为PDF格式。 The panel contains few ExtJS and HTML components which get added dynamically. 该面板包含一些动态添加的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;'
});

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. 我想做的是，单击“导出”按钮的onClick时，“扩展”面板数据应以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 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. 但是我想把me.outputFramePanel放在$（'＃render_me'）。get（0）之外，并且应该能够以PDF格式导出数据。

Please help! 请帮忙！

Also, does jsPDF support Japanese characters? 另外，jsPDF是否支持日语字符？

Thanks and regards, Stu 谢谢和问候，斯图

Answer 1

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. 为了使其正常工作，您需要将代码放入HTML iframe中并使其整体可用。 Meaning you cannot dynamically create HTML body and add your components to it. 意味着您无法动态创建HTML正文并将组件添加到其中。 Create your components in a separate Javascript file and add to the HTML created. 在单独的Javascript文件中创建组件，然后添加到创建的HTML中。 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. 在创建类似以下内容的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>";

Now add it to your Ext Panel as iFrames srcdoc. 现在，将其作为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>'
});

Now call document.getElementById('frameReportPanel') and do the jsPDF print on it. 现在调用document.getElementById（'frameReportPanel'）并在上面进行jsPDF打印。

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/ 仅供参考，我没有在应用程序中使用iFrame或jsPDF，它是一个很好的工具，但是我需要语言支持，而是选择了printElement-> http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

I hope it's helpful. 希望对您有所帮助。 :) :)

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-27 10:04:22

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-27 10:04:22

解决方案1
0 已采纳 2015-10-27 10:04:22