2

Tenho um javascript gera uma tabela dinâmica. Olhando no Stack Overflow procurei por métodos para imprimir um relatório dessa tabela. No meu caso, quando o usuário clica em Imprimir tabela abre uma página com o layout da tabela de relatório, o meu código faz todo o relatório correto, e tals, mas eu não sei o porque de aparecer esse bendito undefined:

inserir a descrição da imagem aqui

Parte do código da impressão da tabela:

function relatorio() {
  var conteudo;
  var linhas;
  var dataFinalD2 = new Date();
  var n=0;

  for (i = 0; i < ContPosic; i++) { 
    // Adicionando primeira linha
    var Rlservice =$('.Rlservice'+(i+1)).val();  
    var Rlsistema =$('.Rlsistema'+(i+1)).val();  
    var Tpf =$('.Tpf'+(i+1)).val();  
    var Produt =$('.Produt'+(i+1)).val()  
    var AntPraz =$('#AntPraz'+(i+1)+' option:selected ').text();  
    var QtdUteis =$('.QtdUteis'+(i+1)).text();  
    var DtIniRes =$('.DtIniRes'+(i+1)).text();  
    var QtdDiaCo =$('.QtdDiaCo'+(i+1)).text();  
    var DtFinall =$('.DtFinall'+(i+1)).text();  
    var QtdGames =$('.QtdGames'+(i+1)).text();  
    var PfGamess =$('.PfGamess'+(i+1)).text();  
    var data;

    if (i==0) {
      var dia = parseInt(DtIniRes.substring(0, 2));
      var mes = parseInt(DtIniRes.substring(3, 5));
      var ano = parseInt(DtIniRes.substring((DtIniRes.length - 4), (DtIniRes.length - 0)));
      data = new Date();

      data.setDate(dia);
      data.setMonth((mes-1));
      data.setFullYear(ano);
    }

    if (n ==1) {
      data = dataFinalD2;
    } if (n>=1) {
      data.setDate(data.getDate()+1);
    }

    var datainicial = ('0' + data.getDate()).slice(-2) + '/'
      + ('0' + (data.getMonth()+1)).slice(-2) + '/'
      + data.getFullYear();

    //setando pré game //data inicial
    data.setDate(data.getDate()+21-1);

    var datafinal = ('0' + data.getDate()).slice(-2) + '/'
      + ('0' + (data.getMonth()+1)).slice(-2) + '/'
      + data.getFullYear();

    linhas += '<tr>'
      +'<td>'+Rlsistema+'</td>'
      +'<td>Pré-game</td>'
      +'<td>'+datainicial+'</td>'
      +'<td>'+datafinal+'</td>'
      +'</tr>';

    // for dos games
    var x = Math.round(QtdGames);

    for (j = 0; j < x.toFixed(1); j++) { 
      var datainicial1;
      var datafinal1;

      //#######################################################
      if (i >= 1) {
        // calculos da data para mais de 1 item...
        dataFinalD2.setDate(dataFinalD2.getDate()+1);

        datainicial1 = ('0' + dataFinalD2.getDate()).slice(-2) + '/'
          + ('0' + (dataFinalD2.getMonth()+1)).slice(-2) + '/'
          + dataFinalD2.getFullYear();
        //setando pré game
        dataFinalD2.setDate(dataFinalD2.getDate()+14-1);

        datafinal1 = ('0' + dataFinalD2.getDate()).slice(-2) + '/'
          + ('0' + (dataFinalD2.getMonth()+1)).slice(-2) + '/'
          + dataFinalD2.getFullYear();
        //#######################################################
      } else {
        // calculos da data para apenas uma linha
        data.setDate(data.getDate()+1);

        datainicial1 = ('0' + data.getDate()).slice(-2) + '/'
          + ('0' + (data.getMonth()+1)).slice(-2) + '/'
          + data.getFullYear();
        //setando pré game
        data.setDate(data.getDate()+14-1);

        datafinal1 = ('0' + data.getDate()).slice(-2) + '/'
          + ('0' + (data.getMonth()+1)).slice(-2) + '/'
          + data.getFullYear();
      }

      //#######################################################

      linhas+='<tr>' 
        +'<td></td>'
        +'<td>Game '+(j+1)+'</td>'
        +'<td>'+datainicial1+'</td>'
        +'<td>'+datafinal1+'</td>'
        +'</tr>'
    }

    // data fim do pré game 
    data.setDate(data.getDate()+1);

    var datainicial2 = ('0' + data.getDate()).slice(-2) + '/'
      + ('0' + (data.getMonth()+1)).slice(-2) + '/'
      + data.getFullYear();
      //setando pré game
      data.setDate(data.getDate()+14-1);

    var datafinal2 = ('0' + data.getDate()).slice(-2) + '/'
      + ('0' + (data.getMonth()+1)).slice(-2) + '/'
      + data.getFullYear();

    if (j >= x) {
      if (n==0) {
        dataFinalD2 = data;
      } n++;
    }

    linhas+= '<tr>'
      +'<td></td>'
      +'<td>Post-Game</td>'
      +'<td>'+datainicial2+'</td>'
      +'<td>'+datafinal2+'</td>'
      +'</tr>';
  }

  // tabela + linhas que foram adicionadas acima
  var table = '<table>'
    +'<thead>'
    +'    <tr>'
    +'      <td>Release Sistema</td>'
    +'      <td>Iteração</td>'
    +'      <td>Data de Início</td>'
    +'      <td>Data de Fim</td>'
    +'    </tr>'
    +'  </thead>'
    +'  <tbody>'
    + linhas
    +' </tbody>'
    +'</table>';

  conteudo = "<html> <head>"
    +"<title>BANCO XXXXXXX- Relatório</title>"
    +"<style> table {"
    +"border-collapse: collapse;"
    +"} "
    +"table, th, td {"
    +"border: 1px solid black; padding: 4px;"
    +"} </style>"
    +"</head>"
    +"<body><header>"
    +"</header><main>"
    +''
    + table
    +"</main></body><html>";

  tela_impressao = window.open('about:blank');
  tela_impressao.document.write(conteudo);
  tela_impressao.window.print();
  // tela_impressao.window.close();
}
2

3 Respostas 3

2

O retorno de document.write é sempre undefined. Quando você chama o método print, você vai renderizar tudo, incluindo isso.

Apenas utilize:

tela_impressao.window.print(conteudo);

P.s.: montar HTML dessa forma expõe seu código a vulnerabilidades. Para um estudo isso pode ser OK, mas mais para a frente prefira ter um arquivo HTML de template pronto, no qual você possa apenas inserir as informações que precisa com algo como PHP, Java, .NET (i.e.: C#) ou mesmo Angular.

1
  • testei aqui porém agora ele nem exibe a tabela apenas a página em branco sem conteúdo algum, sobre a segurança obrigado pela dica, essa página irá ficar em um server interno,local nada muito sofisticado, no momento atende. Commented 17/07/2017 às 17:04
1

Depois de analisar meu código, vi que o erro era uma simples questão de inicializar as variáveis que antes estavam assim

var conteudo; 
var linhas;

e agora coloquei assim:

var conteudo = ""; 
var linhas = "";

o undefined estava aparecendo pois, quando eu adicionava o html no conteúdo ou as linhas da tabela (tr) na variável linhas eu deixava oque estava antes e adicionava oque eu queria, ou seja sem as variáveis estar devidamente inicializadas elas vinham com o valor pré-definido como undefined, inicializando elas não tive mais este problema.

-1

Não estava conseguindo postar um código funcional usando a ferramenta do stackoverflow então criei o jsfiddle de exemplo. Qualquer dúvida restante pode postar no comentário abaixo que irei te ajudar, pegue o código e modifique-o.

EXEMPLO

1
  • Eu tentei adaptar ao meu código, pelo que vi seu código ele pega o html que está dentro da div, isso eu já fiz, mas não se aplica ao meu caso tendo em vista que eu quero imprimir uma tabela que está sendo gerada no javascript, tentei adaptar fazendo isso tela_impressao = window.open(""); tela_impressao.document.write(conteudo.outerHTML); tela_impressao.print(); porém não deu certo, fazendo isso igual ao seu código da undefined e não imprimi nada na tela, tela_impressao = window.open('about:blank'); tela_impressao.document.write(conteudo); tela_impressao.window.print(); <cod. atual. Commented 18/07/2017 às 14:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .