这篇文章主要讲解了“vue中怎么使用file-saver本地文件导出功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么使用file-saver本地文件导出功能”吧！
1:安装xlsx和file-saver
npm install file-saver xlsx --save
2:创建localExports.js文件
3：直接上代码
import XLSX from 'xlsx';const FileSaver = require('file-saver');import { getRandomNum } from '@/utils';// 本地导出表格 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;}4：使用方式
<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', '模拟数据'); },}5:good为table组件的id，getRamdomNum方法如下
// 生成随机数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本地文件导出功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
