使用jsPDF將extJS面板內容導出爲PDF

我試圖將ExtJS面板內容導出爲PDF格式。該面板包含幾個ExtJS和HTML組件，可以動態添加。使用jsPDF將extJS面板內容導出爲PDF

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;

我所試圖做的是，導出按鈕的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

代替$（ '＃render_me'）。得到（0）我希望把me.outputFramePanel，應該能夠將數據以PDF格式導出。

請幫忙！

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

感謝和問候，斯圖

來源

2015-10-16 Stu

jsPDF的任何替代品？ – Stu

嘗試用'me.outputFramePanel.el.dom'替換$（'＃render_me'）。get（0）'。 –

它正在執行，但PDF在沒有任何內容的情況下變爲空白。 – Stu

了很多努力後發現這一點。爲了使其工作，您需要將代碼放在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。

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/

我希望這是有幫助的。 :)

來源

2015-10-27 10:04:22 Stu

使用jsPDF將extJS面板內容導出爲PDF

回答

相關問題