vue3.0+element導(dǎo)出excel表格

最近根據(jù)公司需求做了一個后臺管理系統(tǒng),需要用到excel導(dǎo)出數(shù)據(jù)功能,所以對此功能進行簡單的總結(jié):

1、 安裝相關(guān)依賴:

主要是兩個依賴:(xlsx和file-saver)

npm install --save xlsx file-saver

npm install -D script-loader

對于這兩個插件使用,github上邊有更加詳細的參考

https://github.com/SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)

https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js

2婆赠、 在src路徑下新建一個文件夾(vendor---或者自己任意取)佳励,里面放置兩個文件Blob.js和Export2Excel.js(這兩個文件見文章末尾)

3休里、 在.vue文件里引入,并寫這兩個方法:


import { export_json_to_excel } from '@/vendor/Export2Excel'

----------

export2Excel() {

      require.ensure([], () => {

        const tHeader = [] // 對應(yīng)表格輸出的中文title

        const filterVal = [] // 對應(yīng)表格輸出的數(shù)據(jù)

        this.tableHead.forEach(val => {

          tHeader.push(val.label)

          filterVal.push(val.prop)

        })

        const list = this.leadsData // 表格data

        const data = this.formatJson(filterVal, list)

        export_json_to_excel(tHeader, data, '統(tǒng)計列表') // 對應(yīng)下載文件的名字

      })

    },

    formatJson(filterVal, jsonData) {

      jsonData.map(v => filterVal.map(j => v[j]))

      return jsonData.map(v => filterVal.map(j => v[j]))

    }

4赃承、按鈕調(diào)用導(dǎo)出方法


Blob.js


/* eslint-disable */

/* Blob.js

* A Blob implementation.

* 2014-05-27

*

* By Eli Grey, http://eligrey.com

* By Devin Samarin, https://github.com/eboyjr

* License: X11/MIT

*  See LICENSE.md

*/

/*global self, unescape */

/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,

plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {

    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {

        try {

            new Blob;

            return;

        } catch (e) {}

    }

    // Internally we use a BlobBuilder implementation to base Blob off of

    // in order to support older browsers that only have BlobBuilder

    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {

            var

                get_class = function(object) {

                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];

                }

                , FakeBlobBuilder = function BlobBuilder() {

                    this.data = [];

                }

                , FakeBlob = function Blob(data, type, encoding) {

                    this.data = data;

                    this.size = data.length;

                    this.type = type;

                    this.encoding = encoding;

                }

                , FBB_proto = FakeBlobBuilder.prototype

                , FB_proto = FakeBlob.prototype

                , FileReaderSync = view.FileReaderSync

                , FileException = function(type) {

                    this.code = this[this.name = type];

                }

                , file_ex_codes = (

                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "

                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"

                ).split(" ")

                , file_ex_code = file_ex_codes.length

                , real_URL = view.URL || view.webkitURL || view

                , real_create_object_URL = real_URL.createObjectURL

                , real_revoke_object_URL = real_URL.revokeObjectURL

                , URL = real_URL

                , btoa = view.btoa

                , atob = view.atob

                , ArrayBuffer = view.ArrayBuffer

                , Uint8Array = view.Uint8Array

                ;

            FakeBlob.fake = FB_proto.fake = true;

            while (file_ex_code--) {

                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;

            }

            if (!real_URL.createObjectURL) {

                URL = view.URL = {};

            }

            URL.createObjectURL = function(blob) {

                var

                    type = blob.type

                    , data_URI_header

                    ;

                if (type === null) {

                    type = "application/octet-stream";

                }

                if (blob instanceof FakeBlob) {

                    data_URI_header = "data:" + type;

                    if (blob.encoding === "base64") {

                        return data_URI_header + ";base64," + blob.data;

                    } else if (blob.encoding === "URI") {

                        return data_URI_header + "," + decodeURIComponent(blob.data);

                    } if (btoa) {

                        return data_URI_header + ";base64," + btoa(blob.data);

                    } else {

                        return data_URI_header + "," + encodeURIComponent(blob.data);

                    }

                } else if (real_create_object_URL) {

                    return real_create_object_URL.call(real_URL, blob);

                }

            };

            URL.revokeObjectURL = function(object_URL) {

                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {

                    real_revoke_object_URL.call(real_URL, object_URL);

                }

            };

            FBB_proto.append = function(data/*, endings*/) {

                var bb = this.data;

                // decode data to a binary string

                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {

                    var

                        str = ""

                        , buf = new Uint8Array(data)

                        , i = 0

                        , buf_len = buf.length

                        ;

                    for (; i < buf_len; i++) {

                        str += String.fromCharCode(buf[i]);

                    }

                    bb.push(str);

                } else if (get_class(data) === "Blob" || get_class(data) === "File") {

                    if (FileReaderSync) {

                        var fr = new FileReaderSync;

                        bb.push(fr.readAsBinaryString(data));

                    } else {

                        // async FileReader won't work as BlobBuilder is sync

                        throw new FileException("NOT_READABLE_ERR");

                    }

                } else if (data instanceof FakeBlob) {

                    if (data.encoding === "base64" && atob) {

                        bb.push(atob(data.data));

                    } else if (data.encoding === "URI") {

                        bb.push(decodeURIComponent(data.data));

                    } else if (data.encoding === "raw") {

                        bb.push(data.data);

                    }

                } else {

                    if (typeof data !== "string") {

                        data += ""; // convert unsupported types to strings

                    }

                    // decode UTF-16 to binary string

                    bb.push(unescape(encodeURIComponent(data)));

                }

            };

            FBB_proto.getBlob = function(type) {

                if (!arguments.length) {

                    type = null;

                }

                return new FakeBlob(this.data.join(""), type, "raw");

            };

            FBB_proto.toString = function() {

                return "[object BlobBuilder]";

            };

            FB_proto.slice = function(start, end, type) {

                var args = arguments.length;

                if (args < 3) {

                    type = null;

                }

                return new FakeBlob(

                    this.data.slice(start, args > 1 ? end : this.data.length)

                    , type

                    , this.encoding

                );

            };

            FB_proto.toString = function() {

                return "[object Blob]";

            };

            FB_proto.close = function() {

                this.size = this.data.length = 0;

            };

            return FakeBlobBuilder;

        }(view));

    view.Blob = function Blob(blobParts, options) {

        var type = options ? (options.type || "") : "";

        var builder = new BlobBuilder();

        if (blobParts) {

            for (var i = 0, len = blobParts.length; i < len; i++) {

                builder.append(blobParts[i]);

            }

        }

        return builder.getBlob(type);

    };

}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));


Export2Excel.js


/* eslint-disable */

require('script-loader!file-saver');

require('@/vendor/Blob');

require('script-loader!xlsx/dist/xlsx.core.min');

function generateArray(table) {

    var out = [];

    var rows = table.querySelectorAll('tr');

    var ranges = [];

    for (var R = 0; R < rows.length; ++R) {

        var outRow = [];

        var row = rows[R];

        var columns = row.querySelectorAll('td');

        for (var C = 0; C < columns.length; ++C) {

            var cell = columns[C];

            var colspan = cell.getAttribute('colspan');

            var rowspan = cell.getAttribute('rowspan');

            var cellValue = cell.innerText;

            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

            //Skip ranges

            ranges.forEach(function (range) {

                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {

                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);

                }

            });

            //Handle Row Span

            if (rowspan || colspan) {

                rowspan = rowspan || 1;

                colspan = colspan || 1;

                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});

            }

            ;

            //Handle Value

            outRow.push(cellValue !== "" ? cellValue : null);

            //Handle Colspan

            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);

        }

        out.push(outRow);

    }

    return [out, ranges];

};

function datenum(v, date1904) {

    if (date1904) v += 1462;

    var epoch = Date.parse(v);

    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);

}

function sheet_from_array_of_arrays(data, opts) {

    var ws = {};

    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};

    for (var R = 0; R != data.length; ++R) {

        for (var C = 0; C != data[R].length; ++C) {

            if (range.s.r > R) range.s.r = R;

            if (range.s.c > C) range.s.c = C;

            if (range.e.r < R) range.e.r = R;

            if (range.e.c < C) range.e.c = C;

            var cell = {v: data[R][C]};

            if (cell.v == null) continue;

            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});

            if (typeof cell.v === 'number') cell.t = 'n';

            else if (typeof cell.v === 'boolean') cell.t = 'b';

            else if (cell.v instanceof Date) {

                cell.t = 'n';

                cell.z = XLSX.SSF._table[14];

                cell.v = datenum(cell.v);

            }

            else cell.t = 's';

            ws[cell_ref] = cell;

        }

    }

    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);

    return ws;

}

function Workbook() {

    if (!(this instanceof Workbook)) return new Workbook();

    this.SheetNames = [];

    this.Sheets = {};

}

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;

}

export function export_table_to_excel(id) {

    var theTable = document.getElementById(id);

    console.log('a')

    var oo = generateArray(theTable);

    var ranges = oo[1];

    /* original data */

    var data = oo[0];

    var ws_name = "SheetJS";

    console.log(data);

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */

    // ws['!cols'] = ['apple', 'banan'];

    ws['!merges'] = ranges;

    /* add worksheet to workbook */

    wb.SheetNames.push(ws_name);

    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});

    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")

}

function formatJson(jsonData) {

    console.log(jsonData)

}

export function export_json_to_excel(th, jsonData, defaultTitle) {

    /* original data */

    var data = jsonData;

    data.unshift(th);

    var ws_name = "SheetJS";

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

    /* add worksheet to workbook */

    wb.SheetNames.push(ws_name);

    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});

    var title = defaultTitle || '列表'

    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妙黍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瞧剖,更是在濱河造成了極大的恐慌拭嫁,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抓于,死亡現(xiàn)場離奇詭異做粤,居然都是意外死亡,警方通過查閱死者的電腦和手機捉撮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門怕品,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人巾遭,你說我怎么就攤上這事肉康。” “怎么了灼舍?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵吼和,是天一觀的道長。 經(jīng)常有香客問我骑素,道長炫乓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任砂豌,我火速辦了婚禮厢岂,結(jié)果婚禮上光督,老公的妹妹穿的比我還像新娘阳距。我一直安慰自己,他們只是感情好结借,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布筐摘。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪咖熟。 梳的紋絲不亂的頭發(fā)上圃酵,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音馍管,去河邊找鬼郭赐。 笑死,一個胖子當著我的面吹牛确沸,可吹牛的內(nèi)容都是我干的捌锭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼罗捎,長吁一口氣:“原來是場噩夢啊……” “哼观谦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起桨菜,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤豁状,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后倒得,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泻红,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年屎暇,在試婚紗的時候發(fā)現(xiàn)自己被綠了承桥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡根悼,死狀恐怖凶异,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情挤巡,我是刑警寧澤剩彬,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站矿卑,受9級特大地震影響喉恋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜母廷,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一轻黑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧琴昆,春花似錦氓鄙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽升酣。三九已至,卻和暖如春态罪,著一層夾襖步出監(jiān)牢的瞬間噩茄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工复颈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绩聘,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓耗啦,卻偏偏與公主長得像君纫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子芹彬,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容