將vue 表格導(dǎo)出為Excel文件

在vue組件中趟佃,需要先安裝xlsx和file-saver,使用命令如下:

npm install xlsx --save
npm install file-saver --save

在.vue 模板中代碼如下

<template>
 <div id="app" >
        <button @click="downloadExl">導(dǎo)出</button>
        <div id="tableId">
            <table class="table table-bordered" style="min-width: 100%;">
                <thead>
                    <tr>
                        <th>#</th>
                        <th v-for="(item,index) in Object.keys(jsonData[0])" :key="index">
                            {{item}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row,index) in jsonData" :key="index">
                        <th scope="row">{{index}}</th>
                        <td v-for="col in Object.keys(jsonData[0])">{{(row)[col]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
var XLSX = require('xlsx')
var FileSaver = require('file-saver')
export default {
        data() {
            return {
                jsonData: [{
                    "姓名": "小楊",
                    "聯(lián)系電話": "021-33829544",
                    "家庭地址": "浦東新區(qū)金橋鎮(zhèn)五蓮路1706號(hào)"
                }]
            }
        },
        methods: {
            downloadExl() {
                let wb = XLSX.utils.table_to_book(document.getElementById('tableId')),
                    wopts = {
                        bookType: 'xlsx',
                        bookSST: false,
                        type: 'binary'
                    },
                    wbout = XLSX.write(wb, wopts);

               FileSaver.saveAs(new Blob([this.s2ab(wbout)], {
                    type: "application/octet-stream;charset=utf-8"
                }), "個(gè)人簡(jiǎn)介表.xlsx");
            },
            s2ab(s) {
                if (typeof ArrayBuffer !== 'undefind') {
                    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;
                } else {
                    var buf = new Array(s.length);
                    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                }
            }
        }
}
</script>

可以將vue表格中的數(shù)據(jù),以excel文件導(dǎo)出系草。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市唆涝,隨后出現(xiàn)的幾起案子找都,更是在濱河造成了極大的恐慌,老刑警劉巖石抡,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件檐嚣,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嚎京,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門嗡贺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鞍帝,你說我怎么就攤上這事诫睬。” “怎么了帕涌?”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵摄凡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我蚓曼,道長(zhǎng)亲澡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任纫版,我火速辦了婚禮床绪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘其弊。我一直安慰自己癞己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開白布梭伐。 她就那樣靜靜地躺著痹雅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪糊识。 梳的紋絲不亂的頭發(fā)上绩社,一...
    開封第一講書人閱讀 49,071評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音技掏,去河邊找鬼铃将。 笑死,一個(gè)胖子當(dāng)著我的面吹牛哑梳,可吹牛的內(nèi)容都是我干的劲阎。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼鸠真,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼悯仙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吠卷,我...
    開封第一講書人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤锡垄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后祭隔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體货岭,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了千贯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屯仗。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖搔谴,靈堂內(nèi)的尸體忽然破棺而出魁袜,到底是詐尸還是另有隱情,我是刑警寧澤敦第,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布峰弹,位于F島的核電站,受9級(jí)特大地震影響芜果,放射性物質(zhì)發(fā)生泄漏鞠呈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一师幕、第九天 我趴在偏房一處隱蔽的房頂上張望粟按。 院中可真熱鬧,春花似錦霹粥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至空镜,卻和暖如春浩淘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吴攒。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工张抄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人洼怔。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓署惯,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親镣隶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子极谊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

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

  • 轉(zhuǎn)載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護(hù)的Vue相關(guān)開源項(xiàng)目庫(kù)...
    果汁密碼閱讀 23,092評(píng)論 8 124
  • 來源:github.com Vue.js開源項(xiàng)目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei閱讀 11,598評(píng)論 1 159
  • 秋月夜涼 草芥零星散落 冷澗溪水,拍打安岂,拍打 雕刻了青石 秋風(fēng)來時(shí) 襲一身素色薄衫 長(zhǎng)長(zhǎng)的擺轻猖,浮動(dòng),浮動(dòng) 延續(xù)了時(shí)長(zhǎng)
    墨若雨涵閱讀 176評(píng)論 0 0
  • .1. 有個(gè)小個(gè)子 愛上了小胖子 每次見面 醞釀無(wú)數(shù)次 .2. 小胖子低下頭 擦了擦手 眼神蕩漾著溫柔 ...
    綠子的信閱讀 215評(píng)論 3 4
  • 一. 前言 最初形成知識(shí)管理的觀念域那,是從印象筆記開始的咙边。當(dāng)時(shí)為了寫自己的第一篇論文,每看一篇文獻(xiàn),都會(huì)把自己的心得...
    圓融Glorio閱讀 4,176評(píng)論 3 21