elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
最近學(xué)習(xí)vue項(xiàng)目,遇見elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格,今天就介紹給大家,也給自己留個(gè)筆記,方便查詢
我這里為了同學(xué)們好理解,把所有元素都寫到一個(gè)頁面。
1.第一步安裝插件
npm install file-saver npm install xlsx
2.第二步在mian.js中設(shè)置全局
// vue中導(dǎo)出excel表格模板 import FileSaver from 'file-saver' import XLSX from 'xlsx' Vue.prototype.$FileSaver = FileSaver; //設(shè)置全局 Vue.prototype.$XLSX = XLSX; //設(shè)置全局
3.第三步使用
<template> <div class="daochu"> <el-button @click="o" type="success" round>導(dǎo)出</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)導(dǎo)出
實(shí)際工作中導(dǎo)出按鈕單獨(dú)抽離出去做到可以復(fù)用才是比較合理的
到此這篇關(guān)于elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格的文章就介紹到這了,更多相關(guān)elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04