CODEWITHSUNDEEP
angular6export-to-pdfangular-material-6
nirav dhanorkar
nirav dhanorkar

Reputation: 175

How do I "save as pdf" mat-table in angular 6

I have used angular-materialize theme. I am beginner for Angular framework. But I don't find a right way to export table as pdf.

I have created demo sample from https://material.angular.io/components/table/overview this official site.

My requirement is select date and then allow user to print in pdf. if anyone has an idea or example, It would be very helpful.

Demo: https://stackblitz.com/angular/xbprlqrqjyq?file=app%2Ftable-basic-example.html

Upvotes: 1

Views: 8682

Answers (2)

rams
rams

Reputation: 359

This answer update might be too late , but still might be useful for someone.

mat-table-exporter - this npm package allows to download the mat-table in various formats.

Package Link: https://www.npmjs.com/package/mat-table-exporter

Demo: https://stackblitz.com/edit/mte-demo

Sample code : 

  <button mat-raised-button (click)="exporter.exportTable('json')">Json</button>
  <button mat-raised-button (click)="exporter.exportTable('txt')">Txt</button>

Upvotes: 1

nirav dhanorkar
nirav dhanorkar

Reputation: 175

HTML:

Blockquote

  <button mat-button color="accent" (click)="print()">
   <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">print</mat-icon>
Print

Blockquote

Javascript/typescript:

import jsPDF from 'jspdf';
import 'jspdf-autotable';
print = () => {
  let doc = new jsPDF(); 
  doc.autoTable({
    head: [['Log','', 'Amount']],
    body: this.getLiveData() //returning [["log1", "$100"], ["log2", "$200"]]
  });
  doc.save('table.pdf')
}

Upvotes: 1

Related Questions