zoukankan      html  css  js  c++  java
  • angular6 将表格的JSON数据导出为excel

      前言:

      项目中遇到一个将表格数据输出为excel文件的需求,本需求只是简单地将简单表格的数据输出到excel,并没有涉及表格样式的复杂处理。

    1、安装依赖环境  

    npm install file-saver --save
    npm install @types/file-saver --save-dev
    npm install xlsx --save

    2、html 导出按钮

    <button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出</button>

    3、TS 文件

    import * as FileSaver from 'file-saver';
    import * as XLSX from 'xlsx';
    
    ......
    
    jsonData: any = [
        {
          "姓名": "张三",
          "工號": "22",
          "英文名": "zhangsan",
          "部门": "技术部",
          "性别": "男",
          "手机": "15177641999",
          "个人邮箱": "610336688@qq.com"
        }, {
          "姓名": "李四",
          "工號": "33",
          "英文名": "李四",
          "部门": "人事部",
          "性别": "女",
          "手机": "15177641988",
          "个人邮箱": "978336688@qq.com"
        }];
    
    exportTable() {
        const exportItem = this.jsonData;
      
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportItem);
        const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
        const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        this.saveAsExcelFile(excelBuffer, 'report');
    }
    
    private 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');
    }
    
    .......

    4、输出结果

  • 相关阅读:
    scrapy爬虫框架
    运用GRASP原则来做uml交互类图-------pos机实例
    csv文件读取
    文件编码解读
    smtp模块使用
    csv模块简单使用
    用Beautifulsoup 来爬取贴吧图片
    批处理命令——set
    bat批处理教程之for的/f参数
    docker 下 alpine 镜像设置时区的有效办法
  • 原文地址:https://www.cnblogs.com/gouzei/p/11799829.html
Copyright © 2011-2022 走看看