SheetJS js-xlsx 的使用， exceljs

js-xlsx 官方文檔：https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx

npm xlsx地址：https://www.npmjs.com/package/xlsx

官網：https://sheetjs.com/opensource

 

首先進行安裝或引入：

在瀏覽器中，只需添加腳本標記： <script lang="javascript" src="dist/xlsx.full.min.js"></script> 使用 npm: $ npm install xlsx

使用bower：
$ bower install js-xlsx

import * as XLSX from 'xlsx';  // 數據導出導入所須要的依賴

以angular爲例：

exportExcle() { // 使用 XLSX.utils.aoa_to_sheet(excleData);
        // const excleData = [
        // ['週一', '週二', '週三', '週四', '週五'],
        // ['語文', '數學', '歷史', '政治', '英語'],
        // ['數學', '數學', '政治', '英語', '英語'],
        // ['政治', '英語', '歷史', '政治', '數學'],
        // ];

       // 使用 XLSX.utils.json_to_sheet(excleData);
        const excleData = [ {週一: '語文', 週二: '數學', 週三: '歷史', 週四: '政治', 週五: '英語'}, {週一: '數學', 週二: '數學', 週三: '政治', 週四: '英語', 週五: '英語'}, {週一: '政治', 週二: '英語', 週三: '歷史', 週四: '政治', 週五: '數學'}, ]; // 設置表格樣式，!cols爲列寬
        const options = { '!cols': [ { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, ]}; // 製做工做表的方式有不少種，以數組和對象爲例
        // const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(excleData);
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(excleData); // 使用指定的單元格做爲起點插入數據，r：行， c：列，詳情看官網文檔
        // XLSX.utils.sheet_add_aoa(worksheet, [[「數學」，「語文」], [「政治」，「語文」], [「歷史」，「政治」], ], {origin: {r: 2, c: 5}});
        worksheet['!cols'] = options['!cols']; // 新建一個工做簿
        const workbook: XLSX.WorkBook = XLSX.utils.book_new(); /* 將工做表添加到工做簿*/ XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); /* 輸出工做表， 由文件名決定的輸出格式*/ XLSX.writeFile(workbook, '排庭表.xlsx'); }

 

js-xlsx 只能設置，行寬等簡單的顏色， 設置背景色，自動換行等樣式（也就是cell.s 這個屬性）暫不支持， 他的pro版收費， 可是支持多種樣式設置；

 

 

設置樣式能夠使用 xlsx-style ： https://github.com/protobi/js-xlsx/tree/beta#readme

 

xlsx-style 報錯

1. 若是引入xlsx-style的話可能會報錯：
This relative module was not found:
./cptable in ./node_modules/ xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

在\node_modules\xlsx-style\dist\cpexcel.js  

var cpt = require(’./cpt’ + ‘able’);  改成   var cpt = cptable; 

 

3.  Can't resolve 'fs' in '/node_modules/xlsx-style/ods.js'

暫未解決， 能夠參考 https://stackoverflow.com/questions/51694902/react-boilerplate-error-cant-resolve-xlsx-in-users-react-boilerplate-no

 

 

在 ads.js 改

if(typeof XLSX !== 'undefined') return XLSX.utils; if(typeof module !== "undefined" && typeof require !== 'undefined') { try { return require('./' + 'xlsx').utils; } catch(e) { try { return require('./' + 'xlsx').utils; } catch(ee) { return require('./xlsx').utils; } } throw new Error("Cannot find XLSX utils"); };

 2. Can't resolve '../xlsx' in '/node_modules/xlsx-style'

exceljs

 另外一種 生成表格的插件 ： https://github.com/exceljs/exceljs/blob/master/README_zh.md

安裝： 

npm install exceljs

導入 ： 

// import * as Excel from 'exceljs';

// const Excel = require('exceljs');

import * as Excel from 'exceljs/dist/exceljs.min.js'; 

 

能夠配合   file-saver 使用

地址：   https://github.com/eligrey/FileSaver.js

npm install file-saver --save

此外，還能夠經過如下方式安裝TypeScript定義：

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

 

 import * as FileSaver from 'file-saver';   // 瀏覽器讀取本地的文件已經保存文件所須要的依賴。

 

若是運行時報錯：

Unhandled promise rejection Error:  Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.

Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded.

If you must load one, do so before loading zone.js.) ;

 

解決方法：

將polyfills.ts中的「import 'zone.js/dist/zone';」移至main.ts。

 

若是還報錯； 就把   import 'exceljs/dist/exceljs.min.js';  加進  polyfills.ts 中

 

Cannot find name 'require'

解決方法： 

npm install @types/node --save-dev

 tsconfig.json 中添加
{ "compilerOptions": { "types": ["node"] }}

 

demo

 exportExcle() { const excleData = [ ['週一', '週二'], ['語文', '數學'], ['數學', '英語'], ]; const workbook = new Excel.Workbook(); const sheet = workbook.addWorksheet('Sheet1'); sheet.addRows(excleData); sheet.eachRow((row, rowNumber) => { row.eachCell((cell, colNumber) => { // 對齊樣式
                if (rowNumber === 1 || colNumber === 1) { cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }; } else { cell.alignment = { vertical: 'top', horizontal: 'left', wrapText: true }; } // 邊框
                cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' }, }; // 設置列寬
                sheet.getColumn(colNumber).width = 25; // sheet.getColumn(colNumber).width = 25;
 }); }); sheet.getRow(1).height = 30; workbook.xlsx.writeBuffer() .then((buffer) => { // done
            this.saveAsExcelFile(buffer, '課表'); }); } 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'); }