JavaScript - Gerando arquivos PDF sem plugins

 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:

    José Carlos Macoratti