Turn HTML into PDF

12

I noticed that on Banco do Brasil's website it is possible to choose the output format of a proof of payment in txt , pdf , csv without having to resubmit the page. Is there any library that will convert the html displayed on the page into PDF without the need for new submit and page rendering? The backend will be considered the php or node.

    
asked by anonymous 13.07.2015 / 14:12

5 answers

14

You can do this using 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

    
13.07.2015 / 14:37
3

I already use the Headless Browser PhantomJS to download full FAX-rendered WEB pages that are displayed in the regular browser (it interprets JS and CSS) but with it is also possible to perform a print screen of the desired page of the following form:

  • Create a file with .js extension
  • Paste and save the following content:

Command that accesses a certain page and saves its contents in a .png (but can save as PDF):

var page = require('webpage').create();
page.open('http://stackoverflow.com/', function() {
  page.render('stackoverflow.png');
  phantom.exit();
});
  • Call it the following command line: program name (if it has been entered in the path) plus npath of the javascript file created in the above item getting as follows:

    phantomjs test.js

It is also possible to establish the dimensions of the window where the site is displayed (this is useful if you want to see how a responsive site is being rendered) as follows (this configuration must be done before the page.open ()) :

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
  width: 480,
  height: 800
};

You can call it using the shell_exec command like this:

    $pathToPhantomJS = 'C:\phantomjs-2.0.0-windows\bin\phantomjs';
    $pathToJSScript = 'GetPage.js';
    $comand = $pathToPhantomJS . ' ' . $pathToJSScript . ' ' . $site;
    shell_exec($comand);

It is possible to create a CRON JOB to run the phantomjs teste.js command at a certain time.

The PhantomJS was very useful to me and it is very configurable and I could not describe all the possibilities here so I am sticking some official and non-official links that may be useful:

Download

Link: link

Documentation

Screen Capture: Link

viewportSize: Link

shell_exec (PHP): Link

    
13.07.2015 / 14:43
1

1st Generate the pdf for an instance of AJAX, in Jquery to be faster. 2º Execute a url with the return of the ajax, containing the name of the file, in another php file which will force the download. This way you will have your pdf generated without reflesh:

<script>

$.get('mypdf.php?id='.$_GET['IDCLIENTE'], function(data){
location.href = 'download.php?file='+data;
});

</script>

To generate the PDF faster I recommend the library: link . The same is enough to pass the HTML into a variable that it generates the PDF.

The PHP code below:

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

?>
    
31.08.2015 / 19:45
0

Hello,

Have you taken a look at dompdf ( link )? You can capture the document and submit it to a php that does the conversion.

    
13.07.2015 / 14:35
0

I recommend using iText7 and pdfHTML (the latest add-on for iText7 that deals exactly with your use case).

You can find more explanation on our site at

link

    
04.08.2017 / 15:57