html2pdf.ts

onPDF() {
    var element = document.getElementById('teste').innerHTML;

    //html header

    var header = "<div style='width: 100%; height: 100px;'><div style='float: left'>" +
      "<img src='" + "assets/logo/somar.png" + "' style='width: auto; height: 100px;'>" +
      "</div>" +
      "<div style='float: right'>" +
      "<img src='" + "assets/logo/marica.png" + "' style='width: auto; height: 70px;'>" +
      "</div></div> <br>";

    var title = "<div style='float: left; text-align: left'>Cronograma: " + this.projeto.nome + "</div> <div style='float: right'>" + "Relatório emitido em: " + new Date().toLocaleDateString() + " às " + new Date().toLocaleTimeString() + "</div><br><br><br>";

    var colunas = ["Etapa", "Previsto", "Realizado", "Duração Prevista", "Duração Realizada"];
    var colunas_width = ["20%", "20%", "20%", "20%", "20%"];
    var colunas_align = ["left", "left", "left", "left", "left"];

    var dados_tabela = this.dados;

    var table = "<table style='width: 100%;'>";

    table += "<tr>";
    for (var i = 0; i < colunas.length; i++) {
      table += "<td id='header' style='width: " + colunas_width[i] + "; text-align: " + colunas_align[i] + ";'>" + colunas[i] + "</td>";
    }
    table += "</tr>";
    for (var i = 0; i < dados_tabela.length; i++) {
      table += "<tr>";
      table += "<td class='rowtable' style='width: " + colunas_width[0] + "; text-align: " + colunas_align[0] + ";'>" + dados_tabela[i].etapa + "</td>";
      table += "<td class='rowtable' style='width: " + colunas_width[1] + "; text-align: " + colunas_align[1] + ";'>" + dados_tabela[i].previsto + "</td>";
      table += "<td class='rowtable' style='width: " + colunas_width[2] + "; text-align: " + colunas_align[2] + ";'>" + dados_tabela[i].realizado + "</td>";
      table += "<td class='rowtable' style='width: " + colunas_width[3] + "; text-align: " + colunas_align[3] + ";'>" + dados_tabela[i].duracao_prevista + "</td>";
      table += "<td class='rowtable' style='width: " + colunas_width[4] + "; text-align: " + colunas_align[4] + ";'>" + dados_tabela[i].duracao_realizada + "</td>";
      table += "</tr>";
    }


    table += "</table>";

    var style = `
      <style>
        table {
          font-family: Fontil Sans, monospace;
          border-collapse: collapse;
          width: 100%;
        }

        .rowtable, #header, td {
          text-align: left;
          padding: 8px;
          border-width: 0;
          border-bottom-width: 1px;
          border-style: solid;
          align-items: center;
          box-sizing: border-box;
          border-bottom-color: rgba(0,0,0,.12);
        }

        tr:nth-child(even){background-color: #f2f2f2}

        #header {
            font: inherit;
            font-size: 1.125em;
            color: rgba(0, 0, 0, 0.54);
        }
      </style>
    `;

    element = header + title + table + style;

    const config = {
      margin: [5, 10],
      html2canvas: { scale: 5 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
    };

    html2pdf()
      .set(config)
      .from(element)
      .toPdf().get('pdf').then(function (pdf) {
        var totalPages = pdf.internal.getNumberOfPages();
        for (var i = 1; i <= totalPages; i++) {
          pdf.setPage(i);
          pdf.setFontSize(10);
          pdf.setTextColor(150);

          pdf.text('Página ' + i + ' de ' + totalPages, pdf.internal.pageSize.getWidth() - 30,
            pdf.internal.pageSize.getHeight() - 5);

          pdf.setFontSize(11);
          pdf.setTextColor(0);
        }
      })
      .outputPdf('dataurlnewwindow').then(function (data) {
        this.dialogService.showExportPDFSucess();
      }).catch(function (error) {
        this.dialogService.showError('Não foi possível fazer o download do arquivo. Por favor, contate o suporte.')
      })
  }

  redirectPDFToDownload() {
    this.dialogService.showExportPDF().then((result) => {
      if (result.value) {
        this.onPDF();
      } else return false;
    });;
  }