Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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
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");?>
<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
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...
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
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.
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.. :/
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.
A URL fica meio grande, mas vai tranquilo. Esse um eu gerei com os dados-padrão do Gerador Automático
>
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.
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
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
Olha, eu fiz pelo gerador citado. Saiu essa URL:
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
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 !
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.