[Resolvido] Transformar bloco HTML em Imagem

[S t o n e 0]

Bom dia pessoal,

tenho um script que joga em outro arquivo um bloco html, tenho um gráfico JS

portanto quando exporto para excel o gráfico JS não é rendarizado

a solução seria transformar o bloco html do JS do gráfico em uma imagem e exportar para o excel,

existe essa possibilidade?

 

Obrigado.

[Bruno Augusto 417]

Talvez, vamos chutar alguma coisa aqui.

 

Usando o Firefox com a extensão Web Developer, abra a páginacomo gráfico JS vá em (se não me engano) Opções -> Ver Código-fonte gerado.

 

Procure pela porção do HTML onde foi inserido o script e veja qual a saída HTML que esse script está gerando.

 

Nota: Para ver alguma coisa seu script não pode ser "importado", isto é, através de <script src=""

 

Se for algum plugin jQuery ou similares, também pode não dar certo.

[Rafael R.P 2]

Estou usando a ferramenta HighCharts,

Eu concigo imprimir o título do gráfico, fiz uma div container e pego tudo que está dentro dela para imprimir(o gráfico está dentro dela)

porém o gráfico não é impresso, só o título, acho que é por ser jquery, por isso queria transformar este bloco onde está o gráfico em uma imágem para jogar no excel..

 

OBS: impressão está correta, o gráfico é impresso..

 

Obrigado

[S t o n e 0]

Cara, ele retorna o seguinte HTML !

 

<!-- Chamada do gráfico -->

<table>

<tbody><tr>

<td>





<!-- Container que armazena o gráfico -->

<div id="graficoContainer" style="width: 800; height: 350; margin: 0 auto"><div class="highcharts-container" id="highcharts-1" style="position: relative; overflow-x: hidden; overflow-y: hidden; width: 820px; height: 400px; text-align: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; "><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="820" height="400"><defs></defs><rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="820" height="400" stroke-width="0.000001" stroke="#4572A7"></rect><text x="390" y="25" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#3E576F;fill:#3E576F;" text-anchor="middle" class="highcharts-title" zIndex="1"><tspan x="390">Relatório de Custos do dia 25/08/2011 ao dia 01/09/2011</tspan></text><text x="390" y="40" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#6D869F;fill:#6D869F;" text-anchor="middle" class="highcharts-subtitle" zIndex="1"><tspan x="390">Relatório por tipo de custo</tspan></text><g class="highcharts-series-group" zIndex="3"></g><path d="M 287.19054603431516 17.82315198492034 L 292.19054603431516 17.82315198492034 L 298.24641020330193 35.832219400163765 L 301.75243682745213 46.25852158793627" fill="none" stroke-width="1" stroke="#606060" visibility="visible" zIndex="3" transform="translate(10,55)"></path><path d="M 392.7962805651349 302.1812771223374 L 387.7962805651349 302.1812771223374 L 381.7420850268845 284.1716486868413 L 378.23702445210796 273.7450216978699" fill="none" stroke-width="1" stroke="#606060" visibility="visible" zIndex="3" transform="translate(10,55)"></path><g class="highcharts-shadow" zIndex="4" transform="translate(10,55)"><path d="M 339.9755592155566 40.00000248896646 A 120 120 0 1 1 267.53153063345263 64.35314460124793 L 340 160 A 0 0 0 1 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.05" transform="translate(1,1)"></path><path d="M 339.9755592155566 40.00000248896646 A 120 120 0 1 1 267.53153063345263 64.35314460124793 L 340 160 A 0 0 0 1 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.1" transform="translate(1,1)"></path><path d="M 339.9755592155566 40.00000248896646 A 120 120 0 1 1 267.53153063345263 64.35314460124793 L 340 160 A 0 0 0 1 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(1,1)"></path></g><g class="highcharts-shadow" zIndex="4" transform="translate(10,55)"><path d="M 267.53162628034426 64.3530721328264 A 120 120 0 0 1 339.9532023550234 40.00000912508192 L 340 160 A 0 0 0 0 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.05" transform="translate(1,1)"></path><path d="M 267.53162628034426 64.3530721328264 A 120 120 0 0 1 339.9532023550234 40.00000912508192 L 340 160 A 0 0 0 0 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.1" transform="translate(1,1)"></path><path d="M 267.53162628034426 64.3530721328264 A 120 120 0 0 1 339.9532023550234 40.00000912508192 L 340 160 A 0 0 0 0 0 340 160 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(1,1)"></path></g><g class="highcharts-point" zIndex="5" transform="translate(10,55)"><path d="M 339.9755592155566 40.00000248896646 A 120 120 0 1 1 267.53153063345263 64.35314460124793 L 340 160 A 0 0 0 1 0 340 160 Z" fill="#4572A7" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path><path d="M 339.9755592155566 40.00000248896646 A 120 120 0 1 1 267.53153063345263 64.35314460124793 L 340 160 A 0 0 0 1 0 340 160 Z" fill="rgb(192,192,192)" isTracker="1314878159924" fill-opacity="0.000001" visibility="visible" zIndex="1" style="cursor:pointer;"></path></g><g class="highcharts-point" zIndex="5" transform="translate(10,55)"><path d="M 267.53162628034426 64.3530721328264 A 120 120 0 0 1 339.9532023550234 40.00000912508192 L 340 160 A 0 0 0 0 0 340 160 Z" fill="#AA4643" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path><path d="M 267.53162628034426 64.3530721328264 A 120 120 0 0 1 339.9532023550234 40.00000912508192 L 340 160 A 0 0 0 0 0 340 160 Z" fill="rgb(192,192,192)" isTracker="1314878159924" fill-opacity="0.000001" visibility="visible" zIndex="1" style="cursor:pointer;"></path></g><g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(10,55)"><text x="397.7962805651349" y="307.1812771223374" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:undefined;line-height:14px;" text-anchor="start" zIndex="1" visibility="visible"><tspan x="397.7962805651349">Motor</tspan></text><text x="282.19054603431516" y="22.82315198492034" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:undefined;line-height:14px;" text-anchor="end" zIndex="1" visibility="visible"><tspan x="282.19054603431516">Transmissão</tspan></text></g><g class="highcharts-legend" zIndex="7" transform="translate(676,110)"><rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="123" height="41" stroke-width="1" stroke="#909090" visibility="visible"></rect><text x="30" y="18" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" zIndex="2"><tspan x="30">Motor</tspan></text><text x="30" y="34" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" zIndex="2"><tspan x="30">Transmissão</tspan></text><rect rx="2" ry="2" fill="#4572A7" x="9.5" y="7.5" width="16" height="12" stroke-width="1" zIndex="3" stroke="#FFFFFF"></rect><rect rx="2" ry="2" fill="#AA4643" x="9.5" y="23.5" width="16" height="12" stroke-width="1" zIndex="3" stroke="#FFFFFF"></rect></g><g class="highcharts-tooltip" zIndex="8" visibility="hidden"><rect rx="5" ry="5" fill="none" x="7" y="7" width="0" height="0" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)"></rect><rect rx="5" ry="5" fill="none" x="7" y="7" width="0" height="0" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)"></rect><rect rx="5" ry="5" fill="none" x="7" y="7" width="0" height="0" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.15000000000000002" transform="translate(1,1)"></rect><rect rx="5" ry="5" fill="rgb(255,255,255)" x="7" y="7" width="0" height="0" stroke-width="2" fill-opacity="0.85"></rect><text x="12" y="24" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;padding:0;white-space:nowrap;fill:#333333;" zIndex="1"><tspan x="12"> </tspan></text></g><text x="810" y="395" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:10px;cursor:pointer;color:#909090;fill:#909090;" text-anchor="end" zIndex="8"><tspan x="810">Sistema Eagle de Monitoramento v3.0</tspan></text><g class="highcharts-tracker" zIndex="9" transform="translate(10,55)"></g></svg></div></div></td>

</tr>

</tbody></table>

 

 

O Arquivo Excel está trazendo deste HTML acima somente os textos, não está trazendo o Gráfico como deveria...

 

 

Código do arquivo do excel:

<?
/*session_start();
header("Content-type: application/vnd.ms-excel");
header("Content-Type: application/force-download");
header("Content-Disposition: attachment; filename=relatorio_acesso_status_dia_".$_REQUEST['dataIni']."_a_".$_REQUEST['dataFim'].".xls");
header("Pragma: no-cache");*/
?>

<html>
<head>

</head>

<body>
<?
echo str_replace("\\", "", $_REQUEST["conteudoRelatorio"]);
?>
</body>

 

O Arquivo final do excel retorna somente isto:

Relatório de Custos do dia 24/08/2011 ao dia 31/08/2011Relatório por tipo de custoMotorTransmissãoMotorTransmissãoR$: 238

 

Na minha opinião o Excel não está rendarizando o código HTML gerado pelo JS do gráfico, uma solução seria transformar este bloco em uma imagem e postar o local no arquivo do Excel, mas não encontrei nada sobre isto no google!

 

 

Obrigado

[Bruno Augusto 417]

Certo, uma vez que está usando PHP como linguagem servidor, e a biblioteca GD não é lá mito útil parafazer direto HTML para Imagem, experimente converter o HTML para PDF e então o PDF para Imagem, usando ImageMagick + GhostScript

 

Não testei, mas como estamos apenas especulando...

[S t o n e 0]

O mesmo problema cara,

pelo que eu vi esse html2pdf só posso adicinar textos ou imagens,

 

no caso esse bloco html que eu tenho para o gráfico será rendarizado no pdf e como poderia fazer para ele gerar o pdf da pagina?

 

valeu

[Bruno Augusto 417]

Eu estou tão no escuro quanto você.

 

Pegue a biblioteca e execute algum exemplo com ela, que deve estar incluso no pacote baixado.

 

Se funcionar, substitua a string usada (se é que é uma string) pelo seu HTML e teste.

[S t o n e 0]

Cara, quanto ao PDF, o mesmo problema.

Ele não está interpretando o Gráfico, aparece somente os dados em texto do que o HighCharts gera...

 

putz.. :/

[Bruno Augusto 417]

Cara, nesse pé não vai rolar.

 

E se ao invés de usar esse output que tem, e tentar uma mega gambiarra pra exportar pro Excel, não usasse outra forma para gerar seus gráficos.

 

Dei uma olhada rápida no e achei esse e esse.

 

Não são á muito bonitos, mas pelo menos já fazem o output em imagem.

 

Se você quiser algo mais bonitinho, pode usar o Google Charts. Também exporta em imagem (veja abaixo)~e têm API público.

 

Se bobear deve ter até uma classe PHP pra facilitar.

 

http://chart.apis.google.com/chart?chxr=0,0,160&chxt=x&chbh=a&chs=440x220&cht=bhs&chco=4D89F9,C6D9FD&chds=0,160,0,160&chd=t:10,50,60,80,40,60,30|50,60,100,40,30,40,30&chtt=Horizontal+bar+chart

 

A URL fica meio grande, mas vai tranquilo. Esse um eu gerei com os dados-padrão do Gerador Automático

[Rafael R.P 2]

Cara, nesse pé não vai rolar.

 

E se ao invés de usar esse output que tem, e tentar uma mega gambiarra pra exportar pro Excel, não usasse outra forma para gerar seus gráficos.

 

Dei uma olhada rápida no e achei esse e esse.

 

Não são á muito bonitos, mas pelo menos já fazem o output em imagem.

 

Se você quiser algo mais bonitinho, pode usar o Google Charts. Também exporta em imagem (veja abaixo)~e têm API público.

 

Se bobear deve ter até uma classe PHP pra facilitar.

 

http://chart.apis.google.com/chart?chxr=0,0,160&chxt=x&chbh=a&chs=440x220&cht=bhs&chco=4D89F9,C6D9FD&chds=0,160,0,160&chd=t:10,50,60,80,40,60,30|50,60,100,40,30,40,30&chtt=Horizontal+bar+chart

 

A URL fica meio grande, mas vai tranquilo. Esse um eu gerei com os dados-padrão do Gerador Automático

 

 

Tchê testei aqui largar esse link no excel..

de primeira deu certoo... mas agora do nada não funciona mais.. que loucura..

 

no seu excel funcionou? valeu

[S t o n e 0]

Cara deu certo aqui pra mim com o Google Charts, porém estou com um outro problema..

 

se tu testar ai.. os valores que devem ser entrados na URL são meio complicados

 

https://chart.googleapis.com/chart?cht=p&chd=t:1255.30,155.30&chs=800x250&chl=Hello|World

 

se eu boto algum valor com a primeira casa decimal maior que 3 o gráfico fica errado..

 

por ex: tenho o valor 1250.00 (mil duzentos e cinquenta) e o valor 250.00(duzentos e cinquenta)

 

o Gráfico fica meio a meio.. não sei como resolver isto

[Bruno Augusto 417]

Olha, eu fiz pelo gerador citado. Saiu essa URL:

 

http://chart.apis.google.com/chart?chs=300x225&cht=p&chds=0,1250&chd=t:1250,250&chdl=Maior|Menor&chtt=Resposta+iMasters

 

Notei que, no campo Data, tive de escolher o modo Text pois daí pode-se definir um valor mínimo (zero) e máximo (1.250)

 

Analisando as duas URL's, a que eu gerei tem um chds=0,1250 que são justamente essas coordenadas mínima e máxima.

 

Tanto é verdade que, se adicionar esse parâmetro à sua URL, vai funcionar:

 

http://chart.googleapis.com/chart?cht=p&chds=0,1250&chd=t:1255.30,155.30&chs=800x250&chl=Hello|World

[S t o n e 0]

Resolvido!

 

adicionei o parâmetro

chds=a

 

com este parametro ele realiza o alinhamento das fatias de forma automática independente do valor !!

 

finalmente !!

kkkkk

 

valeu pela ajuda cara !