Observei que no site do Banco do Brasil é possível escolher o formato de saída de um comprovante de pgto em txt
, pdf
, csv
sem a necessidade de submeter novamente a página.
Existe alguma biblioteca que converta o html exibido na página em PDF sem a necessidade de novo submit e processamento da página?
O back-end será considerado o php ou node.
4 Respostas
Você pode fazer isso usando jsPDF.
HTML
<div id="conteudo">
<h3>Olá, esta é uma tag H3</h3>
<p>Um parágrafo.</p>
</div>
<div id="editor"></div>
<button id="btGerarPDF">gerar PDF</button>
JavaScript (JQuery)
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#btGerarPDF').click(function () {
doc.fromHTML($('#conteudo').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('exemplo-pdf.pdf');
});
-
ele so redenriza o html ou se colocar algum css ele transforma tbm ? Commented 13/07/2015 às 13:59
-
Infelizmnte não interpreta o CSS. Mas uma solução simples seria converter o HTML pra Canvas (exemplo) e ao invés de
pdf.fromHTML()
, usarpdf.addHTML()
, exemplo:pdf.addHTML($('#ElementoCanvasQueVoceQuerConverterParaPDF')[0], function () { pdf.save('Teste.pdf'); });
Commented 13/07/2015 às 14:08 -
Entendi, este metodo
addHTML()
parece ser novo pelo que vi na documentação, você ja testou ? modifiquei o seu jsfiddle para ele pra funcionar e apareceu quepdf.addHTML não e uma função.
Commented 13/07/2015 às 14:22 -
1Ainda não cheguei a testar esta nova função, mas vi por base aqui: stackoverflow.com/questions/25946275/… Commented 13/07/2015 às 16:36
Eu já faço uso do Headless Browser PhantomJS para download de páginas WEB Completas renderizadas de forma FIEL a exibida no browser comum (ele interpreta o JS e CSS) mas com ele tambem é possivel realizar um print screen da página desejada da sequinte forma:
- Crie um arquivo com extensão .js
- Cole e salve o seguinte conteúdo:
Comando que acessa uma determinada página e salva o conteúdo da mesma em um .png (mas pode salvar como PDF):
var page = require('webpage').create();
page.open('http://stackoverflow.com/', function() {
page.render('stackoverflow.png');
phantom.exit();
});
chame-o da seguinte foma na linha de comandos: nome do programa (caso ele tenha sido inserido no path) mais npath do arquivo javascript criado no item acima ficando da seguinte forma:
phantomjs teste.js
Com ele tambem é possivel estabelecer as dimensões da janela onde o site é exibido (isto é util caso queira ver como está sendo renderizado um site responsivo) da seguinte forma (esta configuração deve ser feita antes do page.open()):
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = {
width: 480,
height: 800
};
Você pode chama-lo usando o comando shell_exec desta forma:
$pathToPhantomJS = 'C:\phantomjs-2.0.0-windows\bin\phantomjs';
$pathToJSScript = 'GetPage.js';
$comand = $pathToPhantomJS . ' ' . $pathToJSScript . ' ' . $site;
shell_exec($comand);
Obs: passo uma terceira variavel que representa o site a ter sua pagina printada o site é pego pelo vetor de args que são passados para o shell.
É possivel criar um CRON JOB para executar o comando phantomjs teste.js
em determinado horário.
O PhantomJS me foi muito util e é muito configuravel e não conseguiria descrever todas a possibilidades aqui então estou colando alguns links Oficial e não Oficias que poderão ser uteis:
Download
Link: http://phantomjs.org/download.html
Documentação
Screen Capture: Link
viewportSize: Link
shell_exec (PHP): Link
1º Faça gerar o pdf por uma instancia de AJAX, no Jquery para ser mais rápido. 2º Execute uma url com o retorno do ajax, contendo o nome do arquivo, em outro arquivo php o qual ira forçar o download. Desta forma vai ter seu pdf gerado sem reflesh:
<script>
$.get('mypdf.php?id='.$_GET['IDCLIENTE'], function(data){
location.href = 'download.php?file='+data;
});
</script>
Para gerar o PDF mais rápido recomendo a biblioteca: http://html2pdf.fr/en/example. A mesma basta passar o HTML em uma variavel que ele gera o PDF.
O codigo do PHP do download abaixo:
<?php
$file_url = $_GET['file'];
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment; filename=\"" . basename($file_url) . "\"");
readfile($file_url);
?>
-
Colocar dentro da a sua função passando os paramentos o JavaScript/Jquery do meu código. Commented 31/08/2015 às 17:48
Segue código em JS usando a API Html Para PDF:
// Code DEMO here
var settings = {
"url": "//v1/Consultar?user=<string>&key=<string>&ArquivoID=<string>",
"method": "GET",
"timeout": 0,
};
$.ajax(settings).done(function (response) {
console.log(response);
});
JQuery
? Pois se for com PHP, sem sair da página, é impossível (a menosAjax
)