angular6 - 如何在角度 6 中“另存为 pdf”mat-table

Question

我使用了 angular-materialize 主题。我是 Angular 框架的初学者。但我找不到将表格导出为 pdf 的正确方法。

我已经从 https://material.angular.io/components/table/overview 这个官方网站创建了演示示例。

我的要求是选择日期，然后允许用户以 pdf 格式打印。如果有人有想法或示例，那将非常有帮助。

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

Answer 1

HTML：

块引用

  <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

块引用

Javascript/打字稿：

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')
}

Answer 2

此答案更新可能为时已晚，但仍可能对某人有用。

mat-table-exporter- 这个 npm 包允许下载各种格式的 mat-table。

包链接：https ://www.npmjs.com/package/mat-table-exporter

演示：https ://stackblitz.com/edit/mte-demo

示例代码：

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