Как экспортировать данные таблицы в PDF и распечатать в Angular 7? - PullRequest
Новая
       1

Как экспортировать данные таблицы в PDF и распечатать в Angular 7?

0 голосов
/ 25 апреля 2019

Я пытаюсь экспортировать данные динамической таблицы в Excel, PDF и распечатать. Но не в состоянии понять, какой угловой материал используют и плагины npm для экспорта данных таблицы в PDF и с опцией Print Не могли бы вы дать предложения и помочь решить эту проблему?

Я могу экспортировать данные в формате Excel, но не могу экспортировать в формате PDF и все еще ищу функции печати. ​​

Ответы [ 4 ]

0 голосов
/ 26 апреля 2019

спасибо, и я могу напечатать данные из таблицы HTML. Используйте приведенный ниже код в вашем файле .ts, передавая id, как я передал. 

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
  <html>
    <head>
      <title>Print tab</title>
      <style>
      //........Customized style.......
      </style>
    </head>
<body onload="window.print();window.close()">${printContents}</body>
  </html>`
    );
    popupWin.document.close();
}
0 голосов
/ 26 апреля 2019 
public generatePDF()
{
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
        // Few necessary setting options
        var imgWidth = 208;
        var pageHeight = 295;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;

        const contentDataURL = canvas.toDataURL('image/png')
        let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
        var position = 0;
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
        pdf.save('MYPdf.pdf'); // Generated PDF
    });
}

Используя вышеуказанную функцию, мы можем преобразовать данные таблицы в pdf. и передайте идентификатор вашей таблице. ....

0 голосов
/ 26 апреля 2019

Если вы используете Mat-Table для хранения ваших данных, вам определенно помогут следующие данные: Примечание: при нажатии кнопки будет работать downloadPdf (). 

    import 'jspdf-autotable';
    import * as jsPDF from 'jspdf';
    constructor(){}
    ngOnInit(){}

     documentHeaders = [
    'Work Order #',
    'Product #',
    'Asset',
    'Operator',
    'Task Name',
    'Target Minute',
    'Actual Minute',
    'Productivity %',
    'Status',
    'Start Time',
    'End Time'
     ];
    functionCall(){
    //will return an array with data which is to be displayed}
    downloadPDF() {
    doc.text('Some Text here ', 10, 10);
    const head = [this.documentHeaders];
    let tableArray = new Array();
    let data = this.functionCall('PDF');
    let header: string;
    header = 'Shift Summary ' + formatDate(this.tDate, 'yyyy/MM/dd', 'en');
    console.log(header);

    const doc = new jsPDF();
    doc.text(header, 10, 10);

    ((doc as any).autoTable as AutoTable)({
      head: head,
      body: data,
      theme: 'grid',
      styles: {
        overflow: 'visible',
        cellWidth: 17,
        minCellWidth: 17
        // fillColor: [255, 0, 0]
      },
      headStyles: {
        cellWidth: 17,
        minCellWidth: 17
      },
      didDrawCell: data => {
        console.log(data.column.index);
      }
    });

    doc.save(header + '.pdf');
  }
0 голосов
/ 25 апреля 2019

для экспорта таблицы в Excel вы можете обратиться к this

, а для печати вы можете использовать код javascript в ts: это работает для реактивной формы "this.formName.getValue ()«но если вы используете традиционный способ, вам просто нужно передать значение формы в переменную« a », остальные вы можете получить значение в document.write(${a.name})

print(formValue){
        let popupWin;
        let a: type = JSON.parse(JSON.stringify(formValue));
        popupWin = window.open('', '_blank', 
         'top=0,left=0,height=100%,width=auto,toolbar=no,titlebar=no');
        popupWin.document.open();
        popupWin.document.write(`<html> <head>
</head><body onload="window.print();window.close()">
 heya !! ${{ a }}
</body> `)
}

, вы можете использовать машинописный код в HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...