快捷導(dǎo)航

Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的詳細(xì)實例

更新時間：2023年06月09日 15:31:07 作者：qq_24800489

在許多的后臺系統(tǒng)中少不了導(dǎo)出Excel表格的功能,下面這篇文章主要給大家介紹了關(guān)于Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

當(dāng)下開發(fā)web應(yīng)用系統(tǒng)的時候，我們往往會遇到需要把網(wǎng)頁上面的數(shù)據(jù)導(dǎo)出到excel這樣的需求，真實的企業(yè)項目里對應(yīng)一些導(dǎo)出財務(wù)報表、員工信息、交易記錄、考勤打卡記錄…等等需求，本文將對此做探討。

開始前補(bǔ)充： 網(wǎng)上是有些牛人已經(jīng)把這個功能封裝成組件了，但每個人的封裝邏輯五花八門，組件的功能也很有限，不一定真能完全符合自己的業(yè)務(wù)需求，找相應(yīng)的API也很麻煩，存在不太敢用，不會用等問題，那么本文將教你如何自己封裝，如何自己自定義相關(guān)功能，如何自定義Excel的樣式，尤其是導(dǎo)出excel后自定義樣式，這在一些現(xiàn)存封裝好的組件是不好實現(xiàn)的，本文可以實現(xiàn)！

本文導(dǎo)出Excel方法的優(yōu)點： 網(wǎng)頁上的table與導(dǎo)出Excel之后的table完全獨(dú)立，也就是說你導(dǎo)出Excel之后的內(nèi)容與網(wǎng)頁沒有直接聯(lián)系，這意味著數(shù)據(jù)導(dǎo)出到Excel后：

有非常強(qiáng)的定制性，實在不理解這句話也沒關(guān)系，本文看完你自然就明白了。
能跨瀏覽器兼容，甚至是某E瀏覽器。
導(dǎo)出非常快，不卡頓！

編碼思路

采用HTML字符串拼接的方法，拼接出一個table，即可顯示到Excel；換句話來說使用HTML的語法寫出來的table能展示到excel上面，還能攜帶樣式！請用心看完拼接過程，拼接看懂了，你會90%了！

1、定義拼接函數(shù)

/**
 * 
 * @param {表頭集合} header 
 * @param {表格數(shù)據(jù)} table 
 * @param {文件名} name 
 * @param {表格名} tname 
 * @param {回調(diào)方法} callback 
 */
function transform(header, table, name, tname, callback) {
    ...
}

2、表格模板字符串拼接

// 定義表格模板字符串
let tableInnerHTML = ""
let headerData = header
let bodyData = table
//這里對應(yīng)是表格數(shù)據(jù)，我們只需要傳過來即可 
// 拼接完全使用thead、tbody、tr、td、th，并且相應(yīng)的tr、th、td里
// 視情況可以自己寫一些 colspan(合并列) 及 rowspan(合并行)等高級操作
tableInnerHTML += "<thead><tr>";
// 表頭拼接--start
tableInnerHTML += `<th colspan=${headerData.length} style="background:#CCFFFF;border:solid;">` + tname + "</th></tr>"
tableInnerHTML += "<tr>"
headerData.forEach(item => {
   tableInnerHTML += `<th rowspan="1" style="background:#FFFFCC; border:solid">${item}</th>`
})
tableInnerHTML += "</tr></thead>";
// 表頭拼接--end
tableInnerHTML += "<tbody>"
// tbody拼接--start
bodyData.forEach(item => {
    tableInnerHTML += "<tr>"
    // 這里視實際項目情況可以作一些過濾~
    for (let key in item) {
       tableInnerHTML += `<td align="center" style="border:solid">${item[key]}</td>`
    }
    tableInnerHTML += "</tr>"
})
tableInnerHTML += "</tbody>";
// tbody拼接--end

3、定義打印函數(shù)

/**
 * 
 * @param {表格模板字符串} table 
 * @param {文件名} name 
 * @param {回調(diào)方法} callback 
 */
function tableToExcel (table, name, callback) {
    ...
}

4、生成 Blob 文件對象，并下載

let template = `<html><head><meta charset="UTF-8"></head><body><table>${table}</table></body></html>`;
let format = function (s, c) {
    return s.replace(/{(w+)}/g,
            function (m, p) {
                return c[p];
            });
};
let ctx = {
    worksheet: name || "Worksheet",
    table: table
};
let blob = new Blob([format(template, ctx)]);
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = name; //這里這個name就是對應(yīng)的文件名！ 
a.click();
a.remove();
callback("success"); /*這里調(diào)用我們自己傳入的回調(diào)方法，這樣導(dǎo)出Excel完成后你就能 在外面知道導(dǎo)出完畢，并且再往下做自己其他的邏輯*/

5、調(diào)用示例

let headerData = ["序號", "姓名", "年齡", "性別", "愛好", "發(fā)量", "薪水"]
let table = [
    {
        index: 1,
        name: '武松',
        age: 18,
        sex: '男',
        hobby: '打虎',
        hair: '滿頭長發(fā)',
        salaried: '每月五十文'
    }
];
let fileName = '測試導(dǎo)出xlsx'
let tabelName = '梁山賊寇調(diào)查表'
transform(headerData, table, fileName, tabelName, (v) => {
    console.log('callback: ', v)
})

至此編碼完畢！上效果：

兼容性問題處理

getExplorer 用于判斷瀏覽器類型，主要針對IE瀏覽器做兼容性處理，這段代碼使用后基本上不會有任何兼容性問題

Cleanup 用于關(guān)閉進(jìn)行IE瀏覽器兼容處理時開啟的定時器

var idTmr; // 定義一個定時器對象
function getExplorer() {
    var explorer = window.navigator.userAgent;
    if (explorer.indexOf("MSIE") >= 0) {
        return "ie"; // ie 
    } else if (explorer.indexOf("Firefox") >= 0) {
        return "Firefox"; // firefox 
    } else if (explorer.indexOf("Chrome") >= 0) {
        return "Chrome"; // Chrome 
    } else if (explorer.indexOf("Opera") >= 0) {
        return "Opera"; // Opera 
    } else if (explorer.indexOf("Safari") >= 0) {
        return "Safari"; // Safari 
    };
};
if (getExplorer() !== "Safari" && name.substr(-1, 4) !== ".xls") {
    name += ".xls";
}
if (getExplorer() === "ie") {
    var curTbl = table;
    var oXL = new ActiveXObject("Excel.Application");
    var oWB = oXL.Workbooks.Add();
    var xlsheet = oWB.Worksheets(1);
    var sel = document.body.createTextRange();
    sel.moveToElementText(curTbl);
    sel.select();
    sel.execCommand("Copy");
    xlsheet.Paste();
    oXL.Visible = true;
    try {
        var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
    } catch (e) {
        print("Nested catch caught " + e);
    } finally {
        oWB.SaveAs(fname); // 
        oWB.Close(savechanges = false);
        oXL.Quit(); oXL = null;
        idTmr = setInterval(Cleanup(), 1);
    }
} else {
    // 無需作兼容處理的瀏覽器直接使用上面的打印方法即可
    tableToExcel(tableInnerHTML, name, callback);
}
function Cleanup() {
    window.clearInterval(idTmr);
}

最后導(dǎo)出封裝

可以在項目中創(chuàng)建一個exportExcel.js文件，并在項目中導(dǎo)出方法：export default transform，這樣就可以不用局限于在Vue里使用，哪怕是Jquery、React等其他前端框架，你只需要將封裝好的方法引入即可。

總結(jié)

到此這篇關(guān)于Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的文章就介紹到這了,更多相關(guān)Vue3.0導(dǎo)出數(shù)據(jù)為Excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: