elementui導出數(shù)據(jù)為xlsx、excel表格
最近學習vue項目,遇見elementui導出數(shù)據(jù)為xlsx、excel表格,今天就介紹給大家,也給自己留個筆記,方便查詢
我這里為了同學們好理解,把所有元素都寫到一個頁面。
1.第一步安裝插件
npm install file-saver npm install xlsx
2.第二步在mian.js中設置全局
// vue中導出excel表格模板 import FileSaver from 'file-saver' import XLSX from 'xlsx' Vue.prototype.$FileSaver = FileSaver; //設置全局 Vue.prototype.$XLSX = XLSX; //設置全局
3.第三步使用
<template> <div class="daochu"> <el-button @click="o" type="success" round>導出</el-button> <el-table id="ou" :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" > <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column> <el-table-column prop="address" label="地址" :formatter="formatter"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1517 弄", } ], }; }, methods:{ o() { let tables = document.getElementById("ou"); let table_book = this.$XLSX.utils.table_to_book(tables); var table_write = this.$XLSX.write(table_book, { bookType: "xlsx", bookSST: true, type: "array", }); try { this.$FileSaver.saveAs( new Blob([table_write], { type: "application/octet-stream" }), "sheetjs.xlsx" ); } catch (e) { if (typeof console !== "undefined") console.log(e, table_write); } return table_write; }, } } </script>
可以看到已經(jīng)導出
實際工作中導出按鈕單獨抽離出去做到可以復用才是比較合理的
到此這篇關于elementui導出數(shù)據(jù)為xlsx、excel表格的文章就介紹到這了,更多相關elementui導出數(shù)據(jù)為xlsx、excel表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue應用qs插件實現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應用qs插件實現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04