如何将 JSON 导出到 CSV 或 Excel - Angular 2

2024-02-14

假设我的 json 是这样的:

var readyToExport = [
   {id: 1, name: 'a'},
   {id: 2, name: 'b'},
   {id: 3, name: 'c'}
];

如何在 Angular2 中将此 JSON 导出为 CSV 或 Excel 文件?

我使用的浏览器是Chrome。

也许 Angular2 不相关,但是,是否有任何第三方插件可以注入 Angular2 并执行此任务?


我使用这两个库实现了excel导出:文件服务器 https://www.npmjs.com/package/file-saver and xlsx https://www.npmjs.com/package/xlsx.

您可以使用以下命令将其添加到现有项目中:

npm install file-saver --save
npm install xlsx --save

Excel服务示例:

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

  constructor() { }

  public exportAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }

  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

}

你可以在我的 github 上找到工作示例:https://github.com/luwojtaszek/ngx-excel-export https://github.com/luwojtaszek/ngx-excel-export

[设置单元格样式]

如果您想设置单元格的样式(例如添加文本换行、居中单元格内容等),您可以使用 xlsx 和 xlsx-style 库来完成此操作。

1)添加所需依赖

npm install file-saver --save
npm install xlsx --save
npm install xlsx-style --save

2) 替换 xlsx 样式的 dist 目录中的 cpexcel.js 文件。

由于这个错误:https://github.com/protobi/js-xlsx/issues/78 https://github.com/protobi/js-xlsx/issues/78需要更换xlsx-style/dist/cpexcel.js with xlsx/dist/cpexcel.js在node_modules目录中。

3)实施ExcelService

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
import * as XLSXStyle from 'xlsx-style';

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

  constructor() { }

  public exportAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    this.wrapAndCenterCell(worksheet.B2);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    // Use XLSXStyle instead of XLSX write function which property writes cell styles.
    const excelBuffer: any = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'buffer' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }

  private wrapAndCenterCell(cell: XLSX.CellObject) {
    const wrapAndCenterCellStyle = { alignment: { wrapText: true, vertical: 'center', horizontal: 'center' } };
    this.setCellStyle(cell, wrapAndCenterCellStyle);
  }

  private setCellStyle(cell: XLSX.CellObject, style: {}) {
    cell.s = style;
  }

  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

}

工作示例:https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style https://github.com/luwojtaszek/ngx-excel-export/tree/xlsx-style

[更新 - 2018 年 8 月 23 日]

这适用于最新的 Angular 6。

yarn install xlsx --save

Excel服务示例:

import {Injectable} from '@angular/core';
import * as XLSX from 'xlsx';

@Injectable()
export class ExcelService {

  constructor() {
  }

  static toExportFileName(excelFileName: string): string {
    return `${excelFileName}_export_${new Date().getTime()}.xlsx`;
  }

  public exportAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = {Sheets: {'data': worksheet}, SheetNames: ['data']};
    XLSX.writeFile(workbook, ExcelService.toExportFileName(excelFileName));
  }
}

我更新了我的仓库:https://github.com/luwojtaszek/ngx-excel-export https://github.com/luwojtaszek/ngx-excel-export

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 JSON 导出到 CSV 或 Excel - Angular 2 的相关文章

随机推荐