12

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.

6
  • Pode ser JQuery? Pois se for com PHP, sem sair da página, é impossível (a menos Ajax) Commented 13/07/2015 às 12:33
  • Pode sim. Pensei em usar angular ou jquery. O que você sugere? Commented 13/07/2015 às 12:34
  • Olá, Já deu uma olhada no dompdf (github.com/dompdf/dompdf) ? Você pode capturar o documento e submeter a um php que faça a conversão. Commented 13/07/2015 às 12:35
  • Gosto de JQuery (particularmente), respondi...acho que é perfeito pra você Commented 13/07/2015 às 12:37
  • Eu recomendo usar iText7 e pdfHTML (o mais recente do add-on para o iText7 que lida exatamente o seu caso de uso). Você pode encontrar mais explicação no nosso site em itextpdf.com/blog/pdfhtml-introduction Commented 4/08/2017 às 13:57

4 Respostas 4

14

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');
});

JSFiddle

4
  • 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(), usar pdf.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 que pdf.addHTML não e uma função. Commented 13/07/2015 às 14:22
  • 1
    Ainda 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
3

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

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);

?>
1
  • Colocar dentro da a sua função passando os paramentos o JavaScript/Jquery do meu código. Commented 31/08/2015 às 17:48
-3

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);
});

inserir a descrição da imagem aqui

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .