在Vue中使用xlsx組件實(shí)現(xiàn)Excel導(dǎo)出功能的步驟詳解
更新時(shí)間：2023年10月25日 11:31:31 作者：sg_knight
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項(xiàng)常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動(dòng)態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實(shí)現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下
1、項(xiàng)目設(shè)置
首先，在控制臺(tái)執(zhí)行以下命令安裝xlsx組件；
npm install xlsx --save 或 yarn add xlsx --save
然后，在vue項(xiàng)目中引入xls組件；
2、準(zhǔn)備數(shù)據(jù)
要導(dǎo)出到Excel，您需要有數(shù)據(jù)。您可以使用本地?cái)?shù)據(jù)或從API獲取數(shù)據(jù)。在本示例中，我們將使用本地?cái)?shù)據(jù)：
exportData: [
{ name: "John", age: 30, city: "New York" },
{ name: "Alice", age: 25, city: "Los Angeles" },
{ name: "Bob", age: 35, city: "Chicago" }
]
3、實(shí)現(xiàn)導(dǎo)出功能
創(chuàng)建導(dǎo)出到Excel的方法。這個(gè)方法將觸發(fā)Excel文件的生成和下載：
exportToExcel() {
const worksheet = XLSX.utils.json_to_sheet(this.exportData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "exported-data.xlsx");
}這個(gè)方法使用xlsx組件將數(shù)據(jù)轉(zhuǎn)換為Excel工作表，然后創(chuàng)建一個(gè)工作簿并將工作表添加到工作簿中。最后，它使用XLSX.writeFile方法將工作簿保存為名為"exported-data.xlsx"的Excel文件。
4、設(shè)置列寬自適應(yīng)
根據(jù)導(dǎo)出數(shù)據(jù)的長度，通過遍歷計(jì)算每列的最大長度，然后通過worksheet['!cols']方法設(shè)置每列寬度；
// 設(shè)置列寬
exportData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
const list = arrData.map(item => {
const val = item[cellIndex] as string;
if(isEmptyString(val)){
return 1;
} else if(val.toString().charCodeAt(0) > 255){ // 判斷是否有中文
return val.toString().length * 2
} else{
return val.toString().length;
}
});
const maxLength = Math.max(...list);
const width = maxLength * 1.1; // 根據(jù)實(shí)際內(nèi)容長度自動(dòng)調(diào)整列寬
if(!worksheet["!cols"]) worksheet["!cols"] = [];
if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 來設(shè)置列寬
});
}); 5、設(shè)置合并單元格
通過worksheet["!merges"]方法可以設(shè)置合并單元格；
// 合并單元格
merges.forEach((item) => {
if(!worksheet["!merges"]){
worksheet["!merges"] = [];
};
worksheet["!merges"].push(item);
// worksheet["!merges"].push({
// s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
// e: { r: 3, c: 4 } // e ("end"): c = 4 r = 3 -> "E4"
// });
});6、設(shè)置導(dǎo)出Excel表格的樣式
xlsx組件庫是不支持設(shè)置Excel表格樣式的，但是可以通過引入xlsx-style-vite組件庫來實(shí)現(xiàn)樣式的設(shè)置；然后通過file-saver導(dǎo)出文件；
6.1 安裝并引入xlsx-style-vite和file-saver組件
yarn add xlsx-style-vite --save yarn add file-saver --save
import XLSXStyle from 'xlsx-style-vite'; import XLSX_SAVE from 'file-saver';
其中 xlsx-style-vite組件是xlsx-style組件的vite版本，用于解決在vite下引入xlsx-style異常的問題；
6.2 設(shè)置單元格居中
遍歷所有單元格，然后通過worksheet[column].s方法設(shè)置每個(gè)單元格的樣式；
exportData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
// 設(shè)置所有單元格居中
let column = utils.encode_cell({c: cellIndex, r: rowIndex});
worksheet[column].s = {
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: false, // 自動(dòng)換行
},
}
});
}); 6.3 設(shè)置單元格背景色和字體
exportData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
// 設(shè)置所有單元格居中
let column = utils.encode_cell({c: cellIndex, r: rowIndex});
if(worksheet[column]){
// 設(shè)置背景色、加粗展示
worksheet[column].s = {
font: {
name: "微軟雅黑",
sz: 16,
color: { rgb: "000000" },
bold: true,
italic: false,
underline: false,
},
fill: {
fgColor: { rgb: "C5D9F1" },
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: false, // 自動(dòng)換行
},
}
}
}
});
}); 6.4 設(shè)置單元格邊框
//單元格外側(cè)框線
const borderAll = {
top: {
style: "thin",
},
bottom: {
style: "thin",
},
left: {
style: "thin",
},
right: {
style: "thin",
},
};
// 設(shè)置單元格邊框
arrData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
let column = utils.encode_cell({c: cellIndex, r: rowIndex});
if(worksheet[column]){
worksheet[column].s = {
border: borderAll,
}
}
}
});
}); 6.5 導(dǎo)出文件
必須通過file-saver組件導(dǎo)出Excel文件，不能通過xlsx組件的writeFile方法導(dǎo)出文件，否則樣式無法生效；
const wbout = XLSXStyle.write(workbook, {
type: 'binary',
bookType: 'xlsx',
});
XLSX_SAVE.saveAs(
new Blob([s2ab(wbout)], {
type: 'application/octet-stream',
}),
'exported-data.xlsx',
);
// 數(shù)據(jù)轉(zhuǎn)換
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}7、完整代碼示例
import * as xlsx from 'xlsx';
import type { WorkBook } from 'xlsx';
import type { JsonToSheet, AoAToSheet } from './typing';
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';
import { isEmptyString } from '@/utils/table';
const { utils, writeFile } = xlsx;
const DEF_FILE_NAME = 'excel-list.xlsx';
export function aoaToSheetXlsx<T = any>({
data,
header,
filename = DEF_FILE_NAME,
write2excelOpts = { bookType: 'xlsx' },
merges = [],
}: AoAToSheet<T>) {
const arrData = [...data];
if (header) {
arrData.unshift(header);
}
const worksheet = utils.aoa_to_sheet(arrData);
/* add worksheet to workbook */
const workbook: WorkBook = {
SheetNames: [filename],
Sheets: {
[filename]: worksheet,
},
};
//單元格外側(cè)框線
const borderAll = {
top: {
style: "thin",
},
bottom: {
style: "thin",
},
left: {
style: "thin",
},
right: {
style: "thin",
},
};
// 設(shè)置列寬
arrData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
const list = arrData.map(item => {
const val = item[cellIndex] as string;
if(isEmptyString(val)){
return 1;
} else if(val.toString().charCodeAt(0) > 255){ // 判斷是否有中文
return val.toString().length * 2
} else{
return val.toString().length;
}
});
const maxLength = Math.max(...list);
const width = maxLength * 1.1; // 根據(jù)實(shí)際內(nèi)容長度自動(dòng)調(diào)整列寬
if(!worksheet["!cols"]) worksheet["!cols"] = [];
if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 來設(shè)置列寬
// 設(shè)置所有單元格居中
let column = utils.encode_cell({c: cellIndex, r: rowIndex});
if(worksheet[column]){
if(rowIndex === 0) { // 標(biāo)題行設(shè)置背景色、加粗展示
worksheet[column].s = {
border: borderAll,
font: {
// name: "微軟雅黑",
// sz: 16,
color: { rgb: "000000" },
bold: true,
italic: false,
underline: false,
},
fill: {
fgColor: { rgb: "C5D9F1" },
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: false, // 自動(dòng)換行
},
}
} else {
worksheet[column].s = {
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: false, // 自動(dòng)換行
},
}
}
}
});
});
// 合并單元格
merges.forEach((item) => {
if(!worksheet["!merges"]){
worksheet["!merges"] = [];
};
worksheet["!merges"].push(item);
// worksheet["!merges"].push({
// s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
// e: { r: 3, c: 4 } // e ("end"): c = 4 r = 3 -> "E4"
// });
});
const wbout = XLSXStyle.write(workbook, {
type: 'binary',
bookType: 'xlsx',
});
XLSX_SAVE.saveAs(
new Blob([s2ab(wbout)], {
type: 'application/octet-stream',
}),
`${filename}.${write2excelOpts.bookType}`,
);
/* output format determined by filename */
// writeFile(workbook, filename, write2excelOpts);
/* at this point, out.xlsb will have been downloaded */
}
// 數(shù)據(jù)轉(zhuǎn)換
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}以上就是在Vue中使用xlsx組件實(shí)現(xiàn)Excel導(dǎo)出功能的步驟詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue xlsx組件實(shí)現(xiàn)Excel導(dǎo)出的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
- vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
- 前端實(shí)現(xiàn)Excel文件導(dǎo)出功能的完整代碼解析(vue實(shí)現(xiàn)excel文件導(dǎo)出)
- vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能詳解
- Vue用Export2Excel導(dǎo)出excel,多級(jí)表頭數(shù)據(jù)方式
- vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
- vue使用xlsx庫和xlsx-style庫導(dǎo)入導(dǎo)出excel、設(shè)置單元格背景色、文字居中、合并單元格、設(shè)置列寬
- 在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
相關(guān)文章
element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了基于vue-ssr服務(wù)端渲染入門詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
基于Vue3和Element Plus實(shí)現(xiàn)自動(dòng)導(dǎo)入功能
在 Vue 3 項(xiàng)目中,結(jié)合 Element Plus 實(shí)現(xiàn)自動(dòng)導(dǎo)入可以顯著減少代碼量,提升開發(fā)效率,Element Plus 提供了官方的自動(dòng)導(dǎo)入插件 unplugin-vue-components 和 unplugin-auto-import,以下是如何配置和使用的詳細(xì)步驟,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue嵌套組件傳參實(shí)例分享,本文以一個(gè)vue遞歸組件為例,探究多層嵌套后事件無法觸發(fā)的問題,我們可以通過查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下2022-04-04
如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)詳解
在開發(fā)中我們經(jīng)常遇到這樣的需求,需要用戶直接點(diǎn)擊一個(gè)鏈接進(jìn)入到一個(gè)頁面,下面這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
最近在vue項(xiàng)目中遇到需要用樹形控件的部分，比如導(dǎo)航目錄是不確定的，所以必須要用樹形結(jié)構(gòu)，下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實(shí)例代碼，需要的朋友參考下吧2018-07-07
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue+antv實(shí)現(xiàn)雷達(dá)圖的示例代碼
這篇文章主要介紹了vue+antv實(shí)現(xiàn)雷達(dá)圖，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來開發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11