这篇文章主要讲解了“vue中怎么使用file-saver本地文件导出功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么使用file-saver本地文件导出功能”吧！
npm install file-saver xlsx --save
计算
安全
数据库
网络和加速
企业服务
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');
// 移除左侧checkbox的节点
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;
}<el-table
id="good"
v-loading="listLoading"
:header-cell-
:data="list"
tooltip-effect="dark"
height="566"
border
@selection-change="handleSelectionChange"
>
import { exportsXlsx } from '@/utils/localExports';
methods:{
onSearch() {
exportsXlsx('good', '模拟数据');
},
}// 生成随机数
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本地文件导出功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
