Javascript Adaptando o código de converter em Excel ou PDF, mas o PDF não funcionou

Air-Gear · 25 de outubro de 2021

Olá!

Eu achei esse código que mostra convertendo uma tabela em Excel ou PDF e faz download do arquivo convertido: https://embed.plnkr.co/4LmtmuIv6RYM1JCW2Aaj/

Neste site, tanto Excel quanto PDF funciona perfeitamente, então eu adaptei esse código para uma pagina que estou trabalhando. Quando fui mexer no código, a parte do Excel já estava implementado e adaptado, então eu apenas coloquei do PDF.

Só que não conseguir funcionar a parte do PDF, pois não fazia o download. Eu fui verificar o erro que estava dando e era que html2canvas não está definido em tableToPDF. Eu fiz varias mudanças e não conseguir fazer funcionar.

Esse é o código, precisamente a parte que faz a conversão em Excel ou PDF, mostrando numa tabela na tela.

	<div class="panel panel-default " ng-class="{whirl:a.loadingP,traditional:a.loadingP}">


            <div class="panel-body" ng-show="a.resultado">
               
                <script type="text/javascript">
                    src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"
                    src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"
                    
                    var tableToExcel = (function () {

                        var uri = 'data:application/vnd.ms-excel;base64,'
                            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
                            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
                            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
                        return function (table, name) {
                            if (!table.nodeType) table = document.getElementById(table)
                            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
                            window.location.href = uri + base64(format(template, ctx))
                        }
                    })()

                    
                    var tableToPDF = (function () {

                        html2canvas(document.getElementById(table), {
                            onrendered: function (table) {
                                var data = table.toDataURL();
                                var docDefinition = {
                                    content: [{
                                        image: data,
                                        width: 500,
                                    }]
                                };
                                pdfMake.createPdf(docDefinition).download("example.pdf");
                                pdfMake.createPdf(docDefinition).download("test.pdf");
                            }
                        });
                    })
                </script>

                <input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')"
                    value="Exportar para Excel">

                    <input type="button" onclick="tableToPDF('testTable')"
                    value="Exportar para PDF">

                <div class="scroll">
                    <div id="output"></div>
                </div>

            </div>
        </div>

Air-Gear · 26 de outubro de 2021

Bom, eu não fiquei parado e fui tentando ate conseguir converterem PDF, mas não está mostrando toda a tabela. Novo código somente do tableToPDF.

function tableToPDF(){    
    html2canvas(document.getElementById('testTable'), {
    	onrendered: function (canvas) {
        var data = canvas.toDataURL();
        var docDefinition = {
        	content: [{
            	image: data,
            	height:700,
        		width: 700,
                margin: 0,
            }]
        };
        pdfMake.createPdf(docDefinition).download("Tabela.pdf");
    }
  });
}

Air-Gear · 12 de novembro de 2021

Bom, como disse anteriormente, não fiquei parado, mas estou atrasado pra mostrar a solução que achei.

function tableToPDF() {
                        var pegar_dados = document.getElementById('testTable').innerHTML;

                        var janela = window.open('','',width=800,height=800);

                        janela.document.write('<html><head>');
                        janela.document.write('<title>PDF</title>');
                        janela.document.write('<link rel="stylesheet" href="vendor/pivottable/dist/pivot.css">');
                        janela.document.write('<link rel="stylesheet" href="app/css/app.css">');
                        janela.document.write('<link rel="stylesheet" href="app/css/style.css">');
                        janela.document.write('</head>');
                        janela.document.write('<body>');
                        janela.document.write('<input type="button" onclick="window.print()"value="Salva PDF">');    
                        janela.document.write('<table class="pvtTable">');    
                        janela.document.write(pegar_dados);
                        janela.document.write('<thead>');
                        janela.document.write('<tr>');
                        janela.document.write('<th>');
                        janela.document.write('</th>');
                        janela.document.write('</tr>');
                        janela.document.write('</thead>');
                        janela.document.write('</table>');    
                        janela.document.write('</body></html>');
                        janela.document.close();
                           
                    }

Como o html2canvas estava criando uma imagem pra depois criar um PDF e estava cortando quase toda a planilha, eu desistir dele e fiz um esquema de optar pra imprimir em PDF. Como abrir no automático não mostrava a planilha com as linhas divisórias, eu optei pra abrir uma nova janela primeiro com a formatação necessárias com um botão Salvar que vai exibira opção de imprimir e o usuário vai escolher a opção Imprimir em PDF pra pra criar o PDF com a planilha com divisórias.

É isso! Problema resolvido!