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

