CODEWITHSUNDEEP
extjs
user451587
user451587

Reputation: 385

Export Chart to PDF for printing EXT JS 4

Does anyone one have any ideo how to export EXT JS chart to PDF for printing? I could not find a solution online.

Upvotes: 2

Views: 2372

Answers (2)

Gabriel Cruz Lyrio
Gabriel Cruz Lyrio

Reputation: 1

// Insert this component into form items to print

{
                        xtype: 'button',
                        tooltip: getTranslate('{Print}'),
                        icon: getImg(16, 'printer'),
                        handler: function(comp) {

                                var obj  = me.down('chart');
                                var el   = obj.getEl();
                                me.print(el.getHTML(), getTranslate('{CashFlow}'));     
                        }
}

// Print chart function

function  printChart(html, title) {


        var footerStyle = '#img {vertical-align:middle;} #footer {position:absolute; left: 0; right: 0; bottom: 0; height: 60px; margin-top: 40px; text-align: center; border:none; font-size: 10pt; border-top: 1px solid #000000;} ';
        var noteStyle   = '.note{display: block;' +
                                'padding: 10px;background-color: #F2F2F2;border-radius: 5px;box-shadow: 3px 3px 3px 0 rgba( 178, 178, 178, .5 );' +  
                                'font-family: "Verdana", cursive, sans-serif;font-size:10px;color:#000;border:1px solid #000;' + 
                                'outline:0;max-width: 300px;}';

        var css = '<style>' + footerStyle + noteStyle + '</style>';        

        //var tela_impressao = window.open('about:blank');        

        var leftCenter = (screen.width-100) / 2;
        var topCenter  = 0; //screen.height / 2;

        var tela_impressao = window.open('about:blank','_blank', 'toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=' + leftCenter + ', top=' + topCenter + ', width=100, height=10, visible=false', ''); 

        var logoImg = '<img id="img" width="90px" height="45px" src="/servicos/interface/cognitus.png"/>';
        var footer =  '<div id="footer">' + logoImg + '<span></span></div>';

        var xhtml = '<html><head><title>' + title + '</title>' + css + '</head><body>' + html + footer + '</body>';

        tela_impressao.document.write(xhtml);

        var myTimer;
        var myFunc = function(){

            tela_impressao.window.print(); // sem timer não carrega imagem para preview
            tela_impressao.window.close();

            timerStop(myTimer);
        };

        myTimer = timerRun(myFunc, 100);           

}     

// Executa uma função no intervalo de milesegundos
function timerRun(func, milliseconds) {
    return setTimeout(func, milliseconds);
}

// Para a execução do time
function timerStop(timerVariable) {
    clearTimeout(timerVariable);
}

Upvotes: 0

jorel
jorel

Reputation: 808

Here are the basic steps of how I did it.

  1. Use Chart.Save method to obtain the SVG content of the chart you want to export.
  2. Send the SVG content to the server
  3. In the server side you can use rsvg-convert or a similar library to do PDF conversion.

Upvotes: 3

Related Questions