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'; // 本地导出表格/** * 导出Excel文件 * @param {*} elementNametable组件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 和操作的buttonconst 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：使用方式