快捷導(dǎo)航

vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法

更新時(shí)間：2018年03月02日 10:21:01 作者：oo靈性

下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

主要是兩個(gè)依賴

npm install --save xlsx file-saver

如果想詳細(xì)看著兩個(gè)插件使用，請(qǐng)移步github。

https://github.com/SheetJS/js-xlsx

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

2、組件里頭引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3、組件methods里寫一個(gè)方法

exportExcel () {
 /* generate workbook object from table */
 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 /* get binary string as output */
 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
 try {
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
 return wbout
},

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 節(jié)點(diǎn) ) ，sheetjs.xlsx 即為導(dǎo)出表格的名字，可修改！

4、點(diǎn)擊導(dǎo)出按鈕執(zhí)行 exportExcel 的方法即可。

組件里頭代碼截圖：

實(shí)現(xiàn)效果圖如下：

導(dǎo)出如下表格的數(shù)據(jù)到excel。

導(dǎo)出到excel 表格，結(jié)果如下：

相關(guān)鏈接：

該工具的其他使用場(chǎng)景( 如react 、jQ、angular ) http://sheetjs.com/

以上這篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue組件中的樣式屬性scoped實(shí)例詳解
vue組件中的style標(biāo)簽標(biāo)有scoped屬性時(shí)表明style里的css樣式只適用于當(dāng)前組件元素。接下來(lái)通過(guò)本文給大家分享vue組件中的樣式屬性scoped實(shí)例詳解，感興趣的朋友跟隨小編一起看看吧
2018-10-10
解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決vue2.0動(dòng)態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
詳解Vue自定義指令及使用
這篇文章主要介紹了Vue自定義指令及使用，對(duì)Vue感興趣的同學(xué)，可以參考下
2021-05-05
想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
在Vue項(xiàng)目中經(jīng)常需要處理文本內(nèi)容過(guò)長(zhǎng)的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF方法流程詳解
在日常的工作中，有時(shí)候會(huì)碰到需要將某個(gè)網(wǎng)址網(wǎng)頁(yè)保存成為pdf的情況，這篇文章主要介紹了用Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
在vue中使用公共過(guò)濾器filter的方法
這篇文章主要介紹了在vue中使用公共過(guò)濾器filter的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12
Vue配合Django使用方式
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面,采用漸進(jìn)式設(shè)計(jì),易于上手,支持組件化開(kāi)發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語(yǔ)法
2024-09-09
vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06