Экспорт содержимого панели extJS в PDF с помощью jsPDF

Я пытаюсь экспортировать содержимое панели ExtJS в формат PDF. Панель содержит несколько компонентов ExtJS и HTML, которые динамически добавляются.Экспорт содержимого панели extJS в PDF с помощью jsPDF

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 из кнопки Экспорт, данные панели 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'). Получить (0) я хочу поставить me.outputFramePanel и должны иметь возможность экспортировать данные в формате PDF.

Пожалуйста, помогите!

Кроме того, поддерживает ли jsPDF японские символы?

Спасибо и уважение, Stu

источник

2015-10-16 Stu

Любые альтернативы для jsPDF? – Stu

Попробуйте заменить '$ ('# render_me'). Get (0)' с 'me.outputFramePanel.el.dom'. –

Выполняется, но 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>";

Теперь добавьте его на свою внешнюю панель как iFrames 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 печать на нем.

И нет, это не поддерживает набор символов на японском языке.

FYI, я не использовал Iframe или jsPDF в моем приложении, это хороший инструмент, но я обязательно языковую поддержку, вместо этого я пошел printElement ->http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Я надеюсь, что это полезно. :)

источник

2015-10-27 10:04:22 Stu

Экспорт содержимого панели extJS в PDF с помощью jsPDF

ответ

Смежные вопросы