美文网首页
angular 导出 Excel

angular 导出 Excel

作者: 欢欣的膜笛 | 来源:发表于2021-03-17 15:27 被阅读0次
    1. 安装依赖环境

      npm install file-saver xlsx --save
      npm install @types/file-saver --save-dev
      
    2. 导出按钮

      <button nz-button nzType="primary" (click)="exportTable()">导出</button>
      
    3. 具体使用

      import * as FileSaver from 'file-saver';
      import * as XLSX from 'xlsx';
      import { WorkSheet } from 'xlsx'
      
      // 导出
          exportTable(): void {
            const tableData = {
                '研发部': [
                  {
                      "姓名": "张三",
                      "工號": "22",
                      "英文名": "zhangsan",
                      "部门": "技术部",
                      "性别": "男",
                      "手机": "15177641999",
                      "个人邮箱": "610336688@qq.com"
                   }, {
                      "姓名": "李四",
                      "工號": "33",
                      "英文名": "李四",
                      "部门": "人事部",
                      "性别": "女",
                      "手机": "15177641988",
                      "个人邮箱": "978336688@qq.com"
                   }
                ],
                '设计部': [
                   {
                      "姓名": "王五",
                      "工號": "22",
                      "英文名": "zhangsan",
                      "部门": "技术部",
                      "性别": "男",
                      "手机": "15177641999",
                      "个人邮箱": "610336688@qq.com"
                   }, {
                      "姓名": "赵六",
                      "工號": "33",
                      "英文名": "李四",
                      "部门": "人事部",
                      "性别": "女",
                      "手机": "15177641988",
                      "个人邮箱": "978336688@qq.com"
                   }
                ],
                '采购部': [
                   {
                      "姓名": "钱七",
                      "工號": "22",
                      "英文名": "zhangsan",
                      "部门": "技术部",
                      "性别": "男",
                      "手机": "15177641999",
                      "个人邮箱": "610336688@qq.com"
                   }, {
                      "姓名": "周八",
                      "工號": "33",
                      "英文名": "李四",
                      "部门": "人事部",
                      "性别": "女",
                      "手机": "15177641988",
                      "个人邮箱": "978336688@qq.com"
                   }
                ]
            }
      
            const Sheets: { [sheet: string]: WorkSheet } = {}
            const SheetNames: string[] = []
      
            Object.keys(tableData).forEach(key => {
                Sheets[key] = XLSX.utils.json_to_sheet(tableData[key])
                SheetNames.push(key)
            })
      
            const workbook: XLSX.WorkBook = { Sheets, SheetNames }
            const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            this.saveAsExcelFile(excelBuffer, 'report');
          }
      
          saveAsExcelFile(buffer: any, fileName: string) {
              const data: Blob = new Blob([buffer], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
              });
              FileSaver.saveAs(data, fileName + '.xlsx');
          }
      

    相关文章

      网友评论

          本文标题:angular 导出 Excel

          本文链接:https://www.haomeiwen.com/subject/cfiscltx.html