xlsx

xlsx是由SheetJS開(kāi)發(fā)的一個(gè)處理excel文件的npm庫(kù)

適用于前端開(kāi)發(fā)者實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel文件的經(jīng)典需求

為了區(qū)別于xlsx文件，突出其應(yīng)用語(yǔ)言，該庫(kù)通常又被稱(chēng)為js-xlsx

導(dǎo)出js數(shù)據(jù)為Excel文件

需要以下步驟：

1. 安裝 xlsx 庫(kù) 你可以使用 npm 包管理器安裝 xlsx 庫(kù)，也可以將 xlsx 下載到本地，然后在 HTML 文件中通過(guò) script 標(biāo)簽引入。
2. 準(zhǔn)備數(shù)據(jù) 將需要導(dǎo)出的數(shù)據(jù)準(zhǔn)備好，并將其存儲(chǔ)為一個(gè)數(shù)組或?qū)ο蟆?/li>
3. 創(chuàng)建工作簿 通過(guò) xlsx 庫(kù)的 utils.book_new() 方法創(chuàng)建一個(gè)工作簿（workbook）對(duì)象，該對(duì)象包含一個(gè)或多個(gè)工作表（worksheet）。
4. 創(chuàng)建工作表 通過(guò) xlsx 庫(kù)的 utils.json_to_sheet() 方法創(chuàng)建一個(gè)工作表，并將準(zhǔn)備好的數(shù)據(jù)作為參數(shù)傳入該方法。如果需要?jiǎng)?chuàng)建多個(gè)工作表，可以多次調(diào)用該方法，并將它們添加到工作簿對(duì)象中。
5. 將工作表添加到工作簿 通過(guò) xlsx 庫(kù)的 utils.book_append_sheet() 方法將創(chuàng)建好的工作表添加到工作簿對(duì)象中。
6. 導(dǎo)出數(shù)據(jù) 通過(guò) xlsx 庫(kù)的 writeFile() 方法將工作簿對(duì)象導(dǎo)出為 Excel 文件。你可以指定導(dǎo)出的文件名和文件格式，比如 .xlsx 或 .csv。

以下是一個(gè)使用 xlsx 庫(kù)將數(shù)據(jù)導(dǎo)出為 Excel 文件的示例代碼：

vue

<script setup>
import * as XLSX from "xlsx/xlsx.mjs";
const download = () => {const data = [["姓名", "年齡", "性別"],["張三", 18, "男"],["李四", 22, "女"],["王五", 25, "男"],];const workbook = XLSX.utils.book_new();const worksheet = XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");XLSX.writeFile(workbook, "data.xlsx");
};
</script><template><button @click="download">導(dǎo)出</button>
</template>

導(dǎo)入Excel文件生成js數(shù)據(jù)

1. 使用input type="file"選擇xlsx文件
2. 使用fileReader讀取文件為二進(jìn)制編碼
3. XLSX.read方法處理二進(jìn)制編碼為worksheet對(duì)象
4. XLSX.utils.sheet_to_json轉(zhuǎn)換worksheet對(duì)象為json數(shù)據(jù)，實(shí)際上就是js數(shù)組
5. 最后處理數(shù)組數(shù)據(jù)為自己想要的格式即可

<template><article><p>導(dǎo)入高德地圖xlsx文件</p><input type="file" ref="upload" accept=".xls,.xlsx" /></article>
</template><script>
import XLSX from "xlsx"
export default {mounted() {// 監(jiān)聽(tīng)表格導(dǎo)入事件this.$refs.upload.addEventListener("change", e => {this.readExcel(e)})},methods: {readExcel(e) {//表格導(dǎo)入const files = e.target.files//如果沒(méi)有文件名，不往下執(zhí)行if (files.length <= 0) return// 上傳文件格式不正確,非xls或者xlsx格式文件，不往下執(zhí)行if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) returnconst fileReader = new FileReader()// readAsBinaryString將文件讀取為二進(jìn)制編碼fileReader.readAsBinaryString(files[0])// 讀取完成fileReader.onload = ev => {try {// 二進(jìn)制數(shù)據(jù)const data = ev.target.result// xlsx處理二進(jìn)制數(shù)據(jù)const workbook = XLSX.read(data, {type: "binary"})//取第一張表const wsname = workbook.SheetNames[0] // 根據(jù)表格內(nèi)容生成json數(shù)據(jù)const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) const outputs = [] //清空接收數(shù)據(jù)for (let i = 0; i < ws.length; i++) {const sheetData = {value: ws[i].adcode,label: ws[i].中文名}outputs.push(sheetData)}} catch (e) {console.log(e)}}}}
}
</script>

xlsx-js-style庫(kù)使用

xlsx基礎(chǔ)庫(kù)不提供樣式設(shè)置，可以使用xlsx-js-style庫(kù)，這個(gè)庫(kù)是xlsx庫(kù)的fork版本，并添加了樣式定義

詳細(xì)樣式可以查看https://github.com/gitbrent/xlsx-js-style/

可以調(diào)節(jié)背景色、字體樣式、border

npm i -s xlsx-js-style

<script setup>
import XLSX from "xlsx-js-style";
console.log();
const download = () => {const wb = XLSX.utils.book_new();const ws = XLSX.utils.aoa_to_sheet([["Hello", "World"],[1, 2],]);// 在單元格對(duì)象中添加 `s` 屬性來(lái)設(shè)置該單元格的樣式ws["A1"].s = {font: { bold: true },alignment: { horizontal: "center" },fill: { fgColor: { rgb: "FFFF0000" } },};ws["B2"].s = {alignment: { horizontal: "center" },font: { bold: true },fill: { fgColor: { rgb: "FFFF0000" } },};XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script>

去掉標(biāo)題頭

XLSX.utils.json_to_sheet默認(rèn)使用Object.keys生成頭部

所以如下數(shù)據(jù)格式不加上skipHeader: true,會(huì)出現(xiàn)0 1 2的索引頭部

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [["姓名", "年齡", "性別"],["張三", 18, "男"],["李四", 22, "女"],["王五", 25, "男"],];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data, {skipHeader: true,});XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">導(dǎo)出</button>
</template>

設(shè)置列寬

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [{ 姓名: "張三", 年齡: 18, 性別: "男" },{ 姓名: "李四", 年齡: 20, 性別: "女" },{ 姓名: "王五", 年齡: 22, 性別: "男" },];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data);ws["!cols"] = [{wpx: 150,},{wpx: 500,},{wpx: 100,},];XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">導(dǎo)出</button>
</template>

合并單元格

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {const data = [{ 姓名: "張三", 年齡: 18, 性別: "男" },{ 姓名: "李四", 年齡: 20, 性別: "女" },{ 姓名: "王五", 年齡: 22, 性別: "男" },];const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(data);// s 表示要合并的單元格范圍的左上角單元格，r 表示該單元格的行號(hào)，c 表示該單元格的列號(hào)，行列號(hào)從 0 開(kāi)始計(jì)數(shù)。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的單元格，即 A1 單元格。// e 表示要合并的單元格范圍的右下角單元格，其含義與 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的單元格，即 B1 單元格。// 因此，{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之間的元格。// 注意，合并會(huì)以開(kāi)始位置單元格中的內(nèi)容為準(zhǔn)，所以合并后的單元格中的內(nèi)容為 A1 單元格中的內(nèi)容。ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];XLSX.utils.book_append_sheet(wb, ws, "Sheet1");XLSX.writeFile(wb, "example.xlsx");
};
</script><template><button @click="download">導(dǎo)出</button>
</template>