vue使用file-saver本地文件導出功能
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';
// 本地導出表格
/**
* 導出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é)點
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方法如下
// 生成隨機數(shù)
export function getRandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
}到此這篇關于vue使用file-saver本地文件導出的文章就介紹到這了,更多相關vue file-saver本地文件導出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue scrollBehavior 滾動行為實現(xiàn)后退頁面顯示在上次瀏覽的位置
這篇文章主要介紹了Vue scrollBehavior 滾動行為實現(xiàn)后退頁面顯示在上次瀏覽的位置,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼
本文主要介紹了vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue中實現(xiàn)子組件相互切換且數(shù)據(jù)不丟失的策略詳解
項目為數(shù)據(jù)報表,但是一個父頁面中有很多的子頁面,而且子頁面中不是相互關聯(lián),但是數(shù)據(jù)又有聯(lián)系,所以本文給大家介紹了vue中如何實現(xiàn)子組件相互切換,而且數(shù)據(jù)不會丟失,并有詳細的代碼供大家參考,需要的朋友可以參考下2024-03-03

