Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用(適合新手)
更新時間：2024年06月21日 09:13:16 作者：小朱小先生
在Vue項目中導出Excel表格是常見的功能,特別是在后臺管理系統(tǒng)中,為了方便用戶將大量數據保存為本地文件,這篇文章主要給大家介紹了關于Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用的相關資料,需要的朋友可以參考下
適用于新手，僅包括：列寬設置、單元格合并、單元格樣式設置
1、基本代碼
這是最基礎的代碼，沒有樣式。其中的data數據格式例如如下：
[
[列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字符串轉換為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這個屬性配置之后。如果網頁上的列寬是200，那么導出之后會發(fā)現(xiàn)在Excel中的列寬變成237.xxx左右。若要保持網頁寬度和導出后寬度一直。需要乘上0.843621。
wpx = 網頁列寬 * 0.843621
// 創(chuàng)建一個新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 設置列寬。有幾列就設置幾個
wx["!cols"] = [
{
wpx: 180
}
];3、設置合并單元格
這里需要注意：單元格合并之后，合并后的顯示內容將根據s里對應的單元格數據為主
// 創(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包。基本代碼如下。
具體樣式設置查看文檔：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++){ // 根據表頭，獲取列號
for(let row = 0; row<data.length;row++){ // 根據內容，獲取行號
let i = row +1; // 行號初始從1開始
ws[ColName[col]+i]['s'] = { // 這里解析成ws['A1'].s = {};根據每個單元格索引進行設置
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字符串轉換為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、設置單元格樣式的時候，需要對單元格進行判斷，防止因為內容為空時導致報錯。
...
if(ws[ColName[col]+i] === undefined){ // 防止內容為null時報錯
continue
}
ws[ColName[col]+i]['s'] = {
...總結
到此這篇關于Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用的文章就介紹到這了,更多相關Vue3導出Excel表格使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了Vue.js實現(xiàn)簡單動態(tài)數據處理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Element中table組件(el-table)右側滾動條空白占位處理
當我設置了max-height,就會在表格右側出現(xiàn)一列空白的占位,本文主要介紹了Element中table組件(el-table)右側滾動條空白占位處理,感興趣的可以了解一下2023-09-09
Vue應用中504錯誤（Gateway timeout）的原因與解決方法
在Vue前端應用中遇到504代理錯誤通常是由于請求在到達服務器之前超時,504錯誤表示網關超時,可能由后端服務響應慢、網絡問題、代理配置錯誤、請求負載過大、前端請求超時設置不當、服務器資源不足或第三方服務問題引起2024-09-09
這篇文章主要介紹了js 實現(xiàn)拖拽排序，拖拽排序對于小伙伴們來說應該不陌生，平時工作的時候，可能會選擇使用類似Sortable.js這樣的開源庫來實現(xiàn)需求。但在完成需求后，大家有沒有沒想過拖拽排序是如何實現(xiàn)的呢？感興趣得話一起來看看下面文章得小心內容吧2021-11-11
最近使用vue做用戶的登錄/退出,在開發(fā)過程中遇到的一些問題,記錄下來,下面這篇文章主要給大家介紹了關于vue項目退出登錄清除store數據的三種方法,需要的朋友可以參考下2022-09-09
vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)
這篇文章主要介紹了vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue 3 引入了 Composition API,使得生命周期鉤子（hooks）在函數式風格中更清晰地表達,下面就來介紹一下Vue3官方Hooks的用法與實現(xiàn)原理,感興趣的可以了解一下2025-05-05
這篇文章主要介紹了Vue數據雙向綁定原理實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要給大家分享介紹了關于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
在前端開發(fā)中,卡片遮罩層是一種常見的交互設計元素,用于強調某個區(qū)域或內容,并提供用戶操作的入口,本文將帶大家在?vue?中結合實際案例實現(xiàn)此功能,感興趣的朋友一起看看吧2024-08-08