快捷導(dǎo)航

Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)

更新時(shí)間：2024年06月21日 09:13:16 作者：小朱小先生

在Vue項(xiàng)目中導(dǎo)出Excel表格是常見的功能,特別是在后臺(tái)管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下

1、基本代碼

這是最基礎(chǔ)的代碼，沒有樣式。其中的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)建一個(gè)空的Workbook對(duì)象
    const wb = XLSX.utils.book_new();
    // 創(chuàng)建一個(gè)新的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對(duì)象
    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、設(shè)置列寬

這里要注意一個(gè)：wpx這個(gè)屬性配置之后。如果網(wǎng)頁上的列寬是200，那么導(dǎo)出之后會(huì)發(fā)現(xiàn)在Excel中的列寬變成237.xxx左右。若要保持網(wǎng)頁寬度和導(dǎo)出后寬度一直。需要乘上0.843621。

wpx = 網(wǎng)頁列寬 * 0.843621

// 創(chuàng)建一個(gè)新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 設(shè)置列寬。有幾列就設(shè)置幾個(gè)
wx["!cols"] = [
    {
        wpx: 180
    }
];

3、設(shè)置合并單元格

這里需要注意：單元格合并之后，合并后的顯示內(nèi)容將根據(jù)s里對(duì)應(yīng)的單元格數(shù)據(jù)為主

 // 創(chuàng)建一個(gè)新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
    { 
        s: { // 合并單元格開始單元格行列信息
                r: 0, // 行號(hào)
                c: 0  // 列號(hào)
        }, 
        e: { // 合并單元格結(jié)束單元格行列信息
                r: 0, // 行號(hào)
                c: 1  // 列號(hào)
        } 
    }
];

// 上面的意思是從第1行第1列到第1行第2列的單元格。
// 需要合并幾個(gè)，就寫多少個(gè){s:{r:0,c:0},e:{r:0,c:0}}

4、單元格樣式

這里需要使用xlsx-js-style包。基本代碼如下。

具體樣式設(shè)置查看文檔：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)建一個(gè)空的Workbook對(duì)象
    const wb = XLSX.utils.book_new();
    // 創(chuàng)建一個(gè)新的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ù)表頭，獲取列號(hào)
        for(let row = 0; row<data.length;row++){ // 根據(jù)內(nèi)容，獲取行號(hào)
            let i = row +1; // 行號(hào)初始從1開始
            ws[ColName[col]+i]['s'] = { // 這里解析成ws['A1'].s = {};根據(jù)每個(gè)單元格索引進(jìn)行設(shè)置
                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對(duì)象
    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、設(shè)置單元格樣式的時(shí)候，需要對(duì)單元格進(jìn)行判斷，防止因?yàn)閮?nèi)容為空時(shí)導(dǎo)致報(bào)錯(cuò)。

...
if(ws[ColName[col]+i] === undefined){ // 防止內(nèi)容為null時(shí)報(bào)錯(cuò)
    continue
}
ws[ColName[col]+i]['s'] = {
...

總結(jié)

到此這篇關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的文章就介紹到這了,更多相關(guān)Vue3導(dǎo)出Excel表格使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: