1、安裝相關依賴
主要是兩個依賴
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 節點 ) ，sheetjs.xlsx 即為導出表格的名字，可修改！
4、點擊導出按鈕執行 exportExcel 的方法即可 。
組件里頭代碼截圖：
實現效果圖如下：
導出如下表格的數據到excel。
導出到excel 表格，結果如下：
相關鏈接：
該工具的其他使用場景( 如react 、jQ、angular ) http://sheetjs.com/
以上這篇vue2.0 + element UI 中 el-table 數據導出Excel的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
