Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用(適合新手)
更新時間：2024年06月21日 09:13:16 作者：小朱小先生
在Vue項目中導出Excel表格是常見的功能,特別是在后臺管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關于Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用的相關資料,需要的朋友可以參考下
適用于新手，僅包括：列寬設置、單元格合并、單元格樣式設置
1、基本代碼
這是最基礎的代碼，沒有樣式。其中的data數(shù)據(jù)格式例如如下：
[
[列1,列2,列3,列4],
[1,2,3,4],
[5,6,7,8]
]
import * as XLSX from 'xlsx';
function s2ab(s: string) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export default function exportExcel(data: any, fileName: string) {
// 創(chuàng)建一個空的Workbook對象
const wb = XLSX.utils.book_new();
// 創(chuàng)建一個新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 將Worksheet添加到Workbook中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件的Binary字符串
const excelBinaryString = XLSX.write(wb, {type: 'binary'});
// 將Binary字符串轉(zhuǎn)換為Blob對象
const blob = new Blob([s2ab(excelBinaryString)], {type: 'application/octet-stream'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}2、設置列寬
這里要注意一個：wpx這個屬性配置之后。如果網(wǎng)頁上的列寬是200，那么導出之后會發(fā)現(xiàn)在Excel中的列寬變成237.xxx左右。若要保持網(wǎng)頁寬度和導出后寬度一直。需要乘上0.843621。
wpx = 網(wǎng)頁列寬 * 0.843621
// 創(chuàng)建一個新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 設置列寬。有幾列就設置幾個
wx["!cols"] = [
{
wpx: 180
}
];3、設置合并單元格
這里需要注意：單元格合并之后，合并后的顯示內(nèi)容將根據(jù)s里對應的單元格數(shù)據(jù)為主
// 創(chuàng)建一個新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{
s: { // 合并單元格開始單元格行列信息
r: 0, // 行號
c: 0 // 列號
},
e: { // 合并單元格結束單元格行列信息
r: 0, // 行號
c: 1 // 列號
}
}
];
// 上面的意思是從第1行第1列到第1行第2列的單元格。
// 需要合并幾個，就寫多少個{s:{r:0,c:0},e:{r:0,c:0}}4、單元格樣式
這里需要使用xlsx-js-style包?；敬a如下。
具體樣式設置查看文檔：GitHub - gitbrent/xlsx-js-style: SheetJS Community Edition + Basic Cell Styles
// import * as XLSX from 'xlsx';
import XLSX from 'xlsx-js-style';
function s2ab(s: string) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export default function exportExcel(data: any, colsWidthArr: any, mergesArr: any, fileName: string) {
// 創(chuàng)建一個空的Workbook對象
const wb = XLSX.utils.book_new();
// 創(chuàng)建一個新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
if(colsWidthArr !== null){
ws["!cols"] = colsWidthArr
}
if(mergesArr !== null){
ws["!merges"] = mergesArr;
}
const ColName = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; // 列索引名
for(let col = 0;col<data[0].length;col++){ // 根據(jù)表頭，獲取列號
for(let row = 0; row<data.length;row++){ // 根據(jù)內(nèi)容，獲取行號
let i = row +1; // 行號初始從1開始
ws[ColName[col]+i]['s'] = { // 這里解析成ws['A1'].s = {};根據(jù)每個單元格索引進行設置
alignment: {
vertical: 'center',
horizontal: 'left'
},
border: {
top: {
style: 'thin',
color: '#000000'
},
bottom: {
style: 'thin',
color: '#000000'
},
left: {
style: 'thin',
color: '#000000'
},
right: {
style: 'thin',
color: '#000000'
}
}
}
}
}
// 將Worksheet添加到Workbook中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件的Binary字符串
const excelBinaryString = XLSX.write(wb, {type: 'binary'});
// 將Binary字符串轉(zhuǎn)換為Blob對象
const blob = new Blob([s2ab(excelBinaryString)], {type: 'application/octet-stream'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}
效果如下：
更新：
1、設置單元格樣式的時候，需要對單元格進行判斷，防止因為內(nèi)容為空時導致報錯。
...
if(ws[ColName[col]+i] === undefined){ // 防止內(nèi)容為null時報錯
continue
}
ws[ColName[col]+i]['s'] = {
...總結
到此這篇關于Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用的文章就介紹到這了,更多相關Vue3導出Excel表格使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue?Router在Vue.js的核心庫上提供了路由的功能,使得我們可以在單頁應用中實現(xiàn)頁面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實現(xiàn),感興趣的可以了解一下2023-12-12
Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫
這篇文章主要介紹了vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue el-form一行里面放置多個el-form-item的實現(xiàn)
本文主要介紹了vue el-form一行里面放置多個el-form-item的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue實現(xiàn)點擊當前標簽高亮效果的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props,需要的朋友可以參考下2017-08-08
Vue 3中的defineEmits()和defineProps()使用小結
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧2024-04-04
Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
在有些情況下我們會有合并表頭、合并列、合并尾部合計的需求,這篇文章主要給大家介紹了關于前端vue中el-table增加合計行及合并單元格的相關資料,需要的朋友可以參考下2023-09-09