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', 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 哦, 這個版本是無依賴的. 

同時 tsconfig 要允許 default any "noImplicitAny": false

如果是在寫代碼的時候想要有 type 提示，那么把上面的注釋掉就可以了. 要 serve 的時候才打開

 

 

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