vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
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è)參考，也希望大家多多支持腳本之家。
- vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼
- Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
- vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問題解決方案
- Vue2 Element el-table多選表格控制選取的思路解讀
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
- vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
- vue2實(shí)現(xiàn)在el-table里插入el-tag的示例代碼
相關(guān)文章
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-05-05
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
本文主要介紹了vue-json-editor json編輯器的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue3組件化開發(fā)常用API知識(shí)點(diǎn)總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06
Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04