Angular 学习笔记 work with excel (导出 excel)

做管理系统经常会需要导出 excel. 毕竟 excel 功能很多, 做图片, 修改结构, 批量操作都很方便.

一般上呢, 这个职责可以让后端去实现的, 前端发个请求就好了.

但是呢, 如果后端实现的话，那么就需要涉及到一些展示的问题. 随着前后端分离, 后端的职责和展现通常是无关的了, 所以把这个任务交给后端并不理想.

既然如此, 那是否可以让前端来完成呢？

多亏了 nodejs 的发展, 基本的读写 excel 格式已经有 js 的版本了. nodejs, browser 都可以使用.

比较火的有 2 个库, 一个是 exceljs 另一个是 sheetjs

https://github.com/sheetjs/sheetjs

sheetjs 很火 20k star github, 不过它有分社区版和付费版. 一个重要的 style 功能只有付费版才有 /.\ 我玩了一下最终还是放弃了.

下面说说 exceljs (这个还有中文文档哦)

exceljs 对 angular 非常不友好

https://github.com/exceljs/exceljs/issues/384 ng4 无法使用

https://github.com/exceljs/exceljs/issues/511 ng5 无法使用

https://github.com/exceljs/exceljs/issues/821 ng7 无法使用

https://github.com/exceljs/exceljs/issues/984 ng 8 无法使用

https://github.com/exceljs/exceljs/issues/1150 ng 9 无法使用

没错，一直到我写这一篇, 它依然有 bug (无法使用类型)

但是没有类型也是可以用的嘛, js 本无类型, 我们只是习惯了类型, 但不代表没有它就活不了.

学习资源 :

https://www.ngdevelop.tech/export-to-excel-in-angular-6

https://github.com/exceljs/exceljs#date-value

step 1 安装

"exceljs": "^3.8.1",
"core-js": "^3.6.4",
"regenerator-runtime": "^0.13.3",
"file-saver": "^2.0.2"

"@types/file-saver": "^2.0.1"

exceljs 本来内依赖了一些 polyfills, 但后来拿掉了, 并要求开发者自己去 import 依赖.

主要依赖是 core-js 和 regenerator-runtime

file-saver 是用来 download excel 的, exceljs 是 nodejs 的东西，它自带的方式是写入 I/O 和 stream, 没有下载的功能，所以我们借助 file-saver 把 stream 下载成 xlsx

step 2 import in app.component.ts

import 'core-js/modules/es.promise';
import 'core-js/modules/es.object.assign';
import 'core-js/modules/es.object.keys';
import 'regenerator-runtime/runtime';
import { Workbook } from 'exceljs';
import * as fs from 'file-saver';

如果想把 polyfills 放到 polyfills.ts 里面也可以. 确保在 import exceljs 之前 import 就可以了.

step 3 代码

async download() {
  const workbook = new Workbook();
  const worksheet = workbook.addWorksheet('My Sheet');
  worksheet.columns = [
    { key: 'string', width: 20, header: 'String' },
    { key: 'textarea', width: 20, header: 'Textarea', style: { alignment: { wrapText: true } } },
    { key: 'number', width: 20, header: 'Number', style: { numFmt: '#,##0.00#######' } },
    { key: 'boolean', width: 20, header: 'Boolean' },
    { key: 'date', width: 20, header: 'Date', style: { numFmt: 'dd-MM-yyyy' } },
    { key: 'datetime', width: 20, header: 'Datetime', style: { numFmt: 'dd-MM-yyyy hh:mm AM/PM' } }
  ];

  worksheet.addRow({
    string: 'string',
    textarea: 'textarea\r\ntextarea',
    number: 55.1,
    boolean: true,
    date: new Date(2020, 0, 1),
    datetime: new Date(Date.UTC(2020, 0, 1, 14, 55, 12)),
  });

  worksheet.addRow({
    string: 'string',
    textarea: 'textarea\r\ntextarea',
    number: 55.123,
    boolean: true,
    date: new Date(2020, 0, 1),
    datetime: new Date(2020, 0, 1, 14, 50, 32, 123)
  });

  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  fs.saveAs(blob, 'CarData.xlsx');

}

step 4: 由于目前有 bug 所以上面这样子 build 的时候会 error 的

  "compilerOptions": {
    "paths": {
      "exceljs": [
        "./node_modules/exceljs/dist/exceljs.bare.min.js"
      ]
    }
  }

解决方法就是改 config link to exceljs/dist/exceljs.bare.min.js

一定要是 bare 哦, 这个版本是无依赖的.

目前没有用到 read excel 的功能，以后有在补上.

Angular 学习笔记 work with excel (导出 excel)

猜你喜欢