HOWTO · JavaScript
Converter HTML em PDF em JavaScript
Este tutorial demonstra como converter HTML em PDF em JavaScript
Nesta página
Ao baixar dados massivos de um aplicativo da web, o formato de arquivo PDF é útil. Ele permite que os usuários baixem material dinâmico como um arquivo para consumo offline. O material HTML é transformado em um documento PDF e baixado como um arquivo PDF usando o recurso de exportação para PDF. Um script do lado do servidor converte HTML em PDF no aplicativo da Web dinâmico.
Neste tutorial, faremos essa conversão usando JavaScript.
Use a biblioteca jsPDF para converter HTML em PDF
Neste método, usaremos a biblioteca jsPDF para converter HTML em PDF. É uma das melhores bibliotecas para usar. A biblioteca jsPDF oferece várias técnicas e opções para personalizar a geração de PDF.
Verifique o código abaixo.
- HTML
<!DOCTYPE html>
<html>
<body>
<div>
<p>Convert this text to PDF.</p>
</div>
<div id="hidden-element">This will not be printed</div>
</body>
</html>
- JavaScript
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
'#hidden-element': function(element, renderer) {
return true;
}
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
elementHTML, 15, 15,
{'width': 170, 'elementHandlers': specialElementHandlers});
A propriedade oritention define a orientação do papel. As opções setFont() e setFontType() são usadas para definir a fonte e o estilo da fonte do Texto. As funções setFontSize() e setTextColor() são usadas para definir o tamanho da fonte e a cor do texto.
Use um objeto de janela para converter HTML em PDF
Neste método, criaremos um objeto de janela, que usaremos para criar um documento associado e escrever o texto HTML no arquivo para exportá-lo como PDF.
Veja o código abaixo
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#text").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Html to PDF</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(text);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="text">
Convert this text to PDF.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
No exemplo acima, a função window.open() abrirá um documento com as dimensões especificadas e o método document.write() é usado para escrever texto no documento aberto.