这篇文章主要介绍了Angular中如何导出表格Excel表格,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
现在前端都可以进行excel文件的简单导入导出操作。
下面是使用插件导出表格成excel文件示例
组件是基于ng-alain封装的 XlsxService,XlsService是基于sheetjs开发的。
文未附相关资源
示例代码
import { Component } from '@angular/core';
import { STColumn, XlsxService } from '@delon/abc';
@Component({
selector: 'components-xlsx-export',
template: `
<button nz-button (click)="download()">Export</button>
<!-- 为了方便使用了ng-alain表格组件,也可以用ng-zorro或者其他库实现的表格。展现是次要的,重点是数据 -->
<st [data]="users" [ps]="3" [columns]="columns" class="mt-sm"></st>
`,
})
export class ComponentsXlsxExportComponent {
constructor(private xlsx: XlsxService) {}
// 表格数据-模拟数据
users: any[] = Array(100)
.fill({})
.map((_item: any, idx: number) => {
return {
id: idx + 1,
name: `name ${idx + 1}`,
age: Math.ceil(Math.random() * 10) + 20,
};
});
columns: STColumn[] = [
{ title: '编号', index: 'id', type: 'checkbox' },
{ title: '姓名', index: 'name' },
{ title: '年龄', index: 'age' },
];
download() {
// 组装要导出的数据
const data = [this.columns.map(i => i.title)];
this.users.forEach(i =>
data.push(this.columns.map(c => i[c.index as string])),
);
// 使用组件XlsxService导出数据为xls文件
this.xlsx.export({
filename: '自定义命名列表.xlsx',
sheets: [
{
data: data,
name: 'sheet name',
},
],
}); }
}
感谢你能够认真阅读完这篇文章,希望小编分享Angular中如何导出表格Excel表格内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。