首页 > 其他 > 详细

Angular纯前端实现table表格导出

时间:2021-06-23 15:17:11      阅读:25      评论:0      收藏:0      [点我收藏+]

项目中使用到,记录一下简单的demo

1、安装filesaver

npm install file-saver --save

2、导出方法

import { saveAs } from "file-saver";

//方法
exportTable() {
  const blob = new Blob([document.getElementById(‘exportableTable‘).innerHTML], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  });
  saveAs(blob, ‘test.xls‘);
}

3、html

<button mat-raised-button color="primary" (click)="exportTable()">导出</button>
<div id="exportableTable" class="hidden-table">
<table>
  <thead>
  <tr>
    <th *ngFor="let item of tableTitle">{{item}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of tableData">
    <td *ngFor="let title of titleArr">{{item[title]}}</td>
  </tr>
  </tbody>
</table>
</div>

 



Angular纯前端实现table表格导出

原文:https://www.cnblogs.com/phantomyy/p/14921402.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!