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

更新: 2020-04-15

补上 read excel 

先用 file reader 把文件变成 buffer 然后调用 exceljs 就可以了, 它很聪明的哦, date number, boolean 都会弄好好.

有个点需要注意, 如果 value 是 null | empty string 那么 eachCell 的时候会完全 skip 掉哦,

input(e: Event) {
  const inputFile = e.target as HTMLInputElement;
  const file = inputFile.files[0];
  const reader = new FileReader();
  reader.onload = async () => {
    const workbook = new Workbook();
    await workbook.xlsx.load(reader.result); // 把 result 放进去
    const worksheet = workbook.getWorksheet('My Sheet');
    worksheet.eachRow((row, rowNumber) => {
      console.log('row', row);
      console.log('rowNumber', rowNumber);
      row.eachCell((cell, colNumber) => {
        console.log('cell value', cell.value);
        console.log('colNumber', colNumber);
      });
    });
  };
  reader.readAsArrayBuffer(file);
}

更新: 2020-04-05

number format

https://www.ablebits.com/office-addins-blog/2016/07/07/custom-excel-number-format/

做管理系统经常会需要导出 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',  20, header: 'String' },
    { key: 'textarea',  20, header: 'Textarea', style: { alignment: { wrapText: true } } },
    { key: 'number',  20, header: 'Number', style: { numFmt: '#,##0.00#######' } },
    { key: 'boolean',  20, header: 'Boolean' },
    { key: 'date',  20, header: 'Date', style: { numFmt: 'dd-MM-yyyy' } },
    { key: 'datetime',  20, header: 'Datetime', style: { numFmt: 'dd-MM-yyyy hh:mm AM/PM' } }
  ];

  worksheet.addRow({
    string: 'string',
    textarea: 'textarea
textarea',
    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
textarea',
    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 哦, 这个版本是无依赖的. 

同时 tsconfig 要允许 default any "noImplicitAny": false

如果是在写代码的时候想要有 type 提示，那么把上面的注释掉就可以了. 要 serve 的时候才打开

 

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