Hoje veremos uma dica bem legal. Como gerar arquivos PDF a partir de JavaScript sem usar plugins. |
Usar plugins pode facilitar muito o desenvolvedor oferecendo recursos para personalizar suas aplicações mas de certa forma vincula seu projeto a uma ferramenta de terceiro que pode ficar desatualizada.
Existem muitos plugins que podem ser usados para gerar um documento PDF a partir de uma tabela HTML.
No entanto podemos fazer isso usando apenas JavaScript, e, é isso que iremos mostrar neste artigo.
Para tornar o código mais simples vou montar a tabela diretamente no código mas ela poderia ser montada com dados vindo de uma fonte de dados como um arquivo XML, texto ou banco de dados.
Ao trabalho...
Recursos Usados
Gerando um arquivo PDF a partir de uma tabela HTML
Para criar e editar o arquivo você pode usar qualquer editor de código decente e eu vou usar o Visual Studio Code.
Então abrindo o VS Code crie um arquivo chamado Index.html com o seguinte código:
<html>
<head>
<title>Converter uma Tabela para PDF usando JavaScript</title>
<style>
table
{
width: 300px;
font: 17px Calibri;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="tabela">
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cargo</th>
</tr>
<tr>
<td>Macoratti</td>
<td>55</td>
<td>Programador</td>
</tr>
<tr>
<td>Jefferson</td>
<td>26</td>
<td>Engenheiro</td>
</tr>
<tr>
<td>Janice</td>
<td>24</td>
<td>Web Designer</td>
</tr>
</table>
</div>
<p>
<input type="button" value="Criar PDF" id="btnImprimir" onclick="CriaPDF()" />
</p>
</body>
<script>
function CriaPDF() {
var minhaTabela = document.getElementById('tabela').innerHTML;
var style = "<style>";
style = style + "table {width: 100%;font: 20px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";
// CRIA UM OBJETO WINDOW
var win = window.open('', '', 'height=700,width=700');
win.document.write('<html><head>');
win.document.write('<title>Empregados</title>'); // <title> CABEÇALHO DO PDF.
win.document.write(style); // INCLUI UM ESTILO NA TAB HEAD
win.document.write('</head>');
win.document.write('<body>');
win.document.write(minhaTabela); // O CONTEUDO DA TABELA DENTRO DA TAG BODY
win.document.write('</body></html>');
win.document.close(); // FECHA A JANELA
win.print(); // IMPRIME O CONTEUDO
}
</script>
</html>
|
Clique no botão OK.
Abrindo o arquivo Index.html em um navegador veremos o seguinte resultado:
Clicando no botão - Criar PDF - podemos gerar o arquivo PDF conforme mostrado abaixo:
Pegue o código do arquivo Index.html aqui : Index.zip
'Porque há um só Deus, e um só Mediador
entre Deus e os homens, Jesus Cristo homem.'
1 Timóteo 2:5
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Gostou ? Compartilhe no Facebook Compartilhe no Twitter
Referências: