vue使用file-saver本地文件導(dǎo)出功能
1:安裝xlsx和file-saver
npm install file-saver xlsx --save
2:創(chuàng)建localExports.js文件
3:直接上代碼
import XLSX from 'xlsx'; const FileSaver = require('file-saver'); import { getRandomNum } from '@/utils'; // 本地導(dǎo)出表格 /** * 導(dǎo)出Excel文件 * @param {*} elementName table組件id名稱 * @param {*} fileName 文件名 * @description 使用說明 * import { exportsXlsx } from '@/utils/localExports'; * exportsXlsx('idName', '文件名稱'); */ export function exportsXlsx(elementName, fileName) { const time = new Date().getTime(); const random = getRandomNum(100, 1000); const wb = XLSX.utils.table_to_book(clearHead(elementName), { raw: true }); const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }); FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}${time}-${random}.xlsx`); } function clearHead(elementName) { const tableDom = document.querySelector('#' + elementName).cloneNode(true); const tableHeader = tableDom.querySelector('.el-table__header-wrapper'); const tableBody = tableDom.querySelector('.el-table__body'); tableHeader.childNodes[0].append(tableBody.childNodes[1]); const headerDom = tableHeader.childNodes[0].querySelectorAll('th'); // 移除左側(cè)checkbox的節(jié)點(diǎn) if (headerDom[0].querySelectorAll('.el-checkbox')) { headerDom[0].remove(); } for (const key in headerDom) { if (headerDom[key].innerText === '操作') { headerDom[key].remove(); } } // 清理掉checkbox 和操作的button const tableList = tableHeader.childNodes[0].childNodes[2].querySelectorAll('td'); for (let key = 0; key < tableList.length; key++) { if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) { tableList[key].remove(); } } return tableHeader; }
4:使用方式
<el-table id="good" v-loading="listLoading" :header-cell-style="{ background: '#FAFAFA', color: '#212532' }" :data="list" tooltip-effect="dark" style="width: 100%" height="566" border @selection-change="handleSelectionChange" > import { exportsXlsx } from '@/utils/localExports'; methods:{ onSearch() { exportsXlsx('good', '模擬數(shù)據(jù)'); }, }
5:good為table組件的id,getRamdomNum方法如下
// 生成隨機(jī)數(shù) export function getRandomNum(Min, Max) { var Range = Max - Min; var Rand = Math.random(); return (Min + Math.round(Rand * Range)); }
到此這篇關(guān)于vue使用file-saver本地文件導(dǎo)出的文章就介紹到這了,更多相關(guān)vue file-saver本地文件導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時(shí),多多少少會(huì)遇到獲取當(dāng)前位置的詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04Vue.js第三天學(xué)習(xí)筆記(計(jì)算屬性computed)
這篇文章主要為大家詳細(xì)介紹了Vue.js第三天的學(xué)習(xí)筆記,vue.js計(jì)算屬性computed,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Vue路由監(jiān)聽實(shí)現(xiàn)同頁面動(dòng)態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽實(shí)現(xiàn)同頁面動(dòng)態(tài)加載的示例,重點(diǎn)在于切換路由的時(shí)候,重新拉取列表數(shù)據(jù),接下來看看實(shí)現(xiàn)方法吧2021-05-05maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Element InfiniteScroll無限滾動(dòng)的具體使用方法
這篇文章主要介紹了Element InfiniteScroll無限滾動(dòng)的具體使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue-echarts如何實(shí)現(xiàn)圖表組件封裝詳解
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關(guān)于vue-echarts如何實(shí)現(xiàn)圖表組件封裝的相關(guān)資料,需要的朋友可以參考下2022-05-05Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中,編寫組件的方式是使用Options API,它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫對(duì)應(yīng)的功能模塊,這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能實(shí)例
這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級(jí)和跨平臺(tái)的QR碼和條形碼掃碼的JS庫,集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下2023-08-08淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12