這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 以下是一些有關使用Canvas的技巧： 繪製基本形狀：Canvas可以用於繪製各種基本形狀，如矩形、圓形、線條等。使用 fillRect() 方法繪製矩形，使用 arc() 方法繪製圓形，使用 lineTo() 方法繪製線條等。 繪 ...
大家好，我是程式視點的小二哥!
今天小二哥要分享的是一個純前端實現讀取和導出excel文件的工具庫：ExcelJS
ExcelJs 簡介
功能十分簡單：
讀取，操作並寫入電子錶格數據和樣式到 XLSX 和 JSON 文件。
一個 Excel 電子錶格文件逆向工程項目。
在本文中，我們使用xlsx文件。xlsx是Microsoft Excel使用的開放XML電子錶格文件格式的文件擴展名。這也是工作中用得最多的一種文件之一。
安裝
npm install exceljs
或CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/exceljs.min.js" />
使用
首先，新建工作簿。
const ExcelJS = require('exceljs');
const wb = new ExcelJS.Workbook();
有個這個對象後，接下來的任何操作都是在這個工作簿對象上處理的。
讀取
我們從現有的 xlsx 文件中讀取。我們假設前兩列中有一些數據。
const fileName = 'items.xlsx';
wb.xlsx.readFile(fileName).then(() => {
const ws = wb.getWorksheet('Sheet1');
const c1 = ws.getColumn(1);
c1.eachCell(c => {
console.log(c.value);
});
const c2 = ws.getColumn(2);
c2.eachCell(c => {
console.log(c.value);
});
}).catch(err => {
console.log(err.message);
});
這裡註意幾個API：
讀取工作表數據，我們使用該函數：
wb.xlsx.readFile(xxx)
獲取指定工作表:
const ws = wb.getWorksheet('Sheet1');
獲取某列數據：
ws.getColumn(1);
迭代每列中單元格的數據：
c1.eachCell(c => {
console.log(c.value);
});
寫入
這裡我們寫入一個全新的xlsx文件。
const Excel = require('exceljs');
const fileName = 'simple.xlsx';
const wb = new Excel.Workbook();
const ws = wb.addWorksheet('My Sheet');
ws.getCell('A1').value = 'John Doe';
ws.getCell('B1').value = 'gardener';
ws.getCell('C1').value = new Date().toLocaleString();
const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];
wb.xlsx
.writeFile(fileName)
.then(() => {
console.log('file created');
})
.catch(err => {
console.log(err.message);
});
向新的工作簿中增加一張工作表：
const ws = wb.addWorksheet('My Sheet');
向指定單元格寫入數據：
ws.getCell('A1').value = 'John Doe';
向指定行中寫入一組數據：
const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];
最後就是寫入一個文件：
wb.xlsx
.writeFile(fileName)
.then(() => {
console.log('file created');
})
.catch(err => {
console.log(err.message);
});
其他
ExcelJs還支持寫入多組數據
ws.addRows([
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20]]
);
添加列標題並定義列鍵和寬度
const headers = [
{ header: 'First name', key: 'fn', width: 15 },
{ header: 'Last name', key: 'ln', width: 15 },
{ heade
r: 'Occupation', key: 'occ', width: 15 },
{ header: 'Salary', key: 'sl', width: 15 },
]
ws.columns = headers;
ExcelJS的功能還遠不止這些。
還有如頁眉和頁腳,凍結/拆分視圖,自動篩選器,合併單元格等。
ExcelJS還支持讀寫CSV文件。
更多內容，請查閱下方鏈接。
ExcelJS地址
https://github.com/exceljs/exceljs
