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

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

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

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

主要是兩個依賴

npm install --save xlsx file-saver

如果想詳細看著兩個插件使用，請移步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里寫一個方法

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é)點 ) ，sheetjs.xlsx 即為導出表格的名字，可修改！

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

組件里頭代碼截圖：

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

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

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

相關(guān)鏈接：

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

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

您可能感興趣的文章:

相關(guān)文章

基于vue實現(xiàn)swipe分頁組件實例
本篇文章主要介紹了基于vue實現(xiàn)swipe分頁組件實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
程序員應該知道的vuex冷門小技巧(超好用)
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應該知道的vuex冷門小技巧的相關(guān)資料,需要的朋友可以參考下
2022-05-05
vue虛擬化列表封裝的實現(xiàn)
這篇文章主要介紹了vue實現(xiàn)虛擬化列表封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue-json-editor json編輯器的使用
本文主要介紹了vue-json-editor json編輯器的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
Vue3實現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下
2023-09-09
vue3組件化開發(fā)常用API知識點總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
ElementPlus表單rules校驗的方法步驟
相信大家經(jīng)常都會遇到要處理表單驗證的環(huán)節(jié),而我在最近的項目中也遇到需要做表單驗證的業(yè)務,下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗的方法步驟,需要的朋友可以參考下
2023-04-04
Vue使用openlayers實現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手嘗試一下
2022-06-06
Vue.js列表渲染綁定jQuery插件的正確姿勢
這篇文章主要為大家詳細介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
基于Vue實現(xiàn)拖拽效果
這篇文章主要介紹了基于Vue實現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下
2018-04-04