Member 13566277 Ответов: 0

Создание автоматической таблицы и печать

я стою на файле component.ts, и я генерирую таблицу tr и td th, как это показано в коде blow.
поэтому я хочу печатать данные с форматом, так что это стиль записи. этот код работает, но данные печати не формируются, данные отображаются как текстовый стиль, plz help

Что я уже пробовал:

import { Component } from '@angular/core';
import { PaginationInstance } from 'ngx-pagination'
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';

  public columns = [];
  public rows = [];
  }

  constructor() {

    this.columns = [
      {
        caption: 'First Name',
        fieldname: 'firstname',       
      },
      {
        caption: 'Last Name',
        fieldname: 'lastname',
        
		},
		{
		caption : 'Age',
		fieldname:age,		
		}
    ];

    this.rows = [
		{
        firstname: "john",
        lastname: "sunny",        
		age:25
      },
	  {
        firstname: "jack",
        lastname: "son",        
		age:20
      }
    ];
  }

print(): void {
    let printContents, popupWin;
    debugger;

    var div
    var table: HTMLTableElement = <HTMLTableElement>document.createElement("TABLE");
	var row = table.insertRow(-1);
    table.setAttribute("border", "2px");
    

    this.columns.forEach(element => {

      var headerCell = document.createElement("TH");

      headerCell.innerHTML = element.caption;
      row.appendChild(headerCell);
      headerCell.className = "innertable";
    });


    var row = table.insertRow(-1);
	this.rows.forEach(element => {

      this.columns.forEach(col => {
        var Cell = document.createElement("TD");

        Cell.innerHTML = element[col.fieldname];
        row.appendChild(Cell);
        Cell.className = "innertable";
      });

    });
    row.setAttribute("border", "2px");
	debugger;
    printContents = table.innerHTML;

    // printContents = document.getElementById('printarea1').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    $(document).ready(function () {

      table.setAttribute("border", "2px");
      popupWin.document.write(`
          <html>
              <body onload="window.print();window.close()">${printContents}
              </body>
          </html>`
      );
      popupWin.document.close();
    });
  }

0 Ответов