×
Ir ao conteúdo
  • Cadastre-se

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


Ir à solução Resolvido por Air-Gear,

Posts recomendados

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>

 

Link para o comentário
Compartilhar em outros sites

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");
    }
  });
}

 

Link para o comentário
Compartilhar em outros sites

  • 3 semanas depois...
  • Solução

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!

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!