1: Install xlsx and file-saver
npm install file-saver xlsx --save
2: Create a file
3: Directly upload the code
import XLSX from 'xlsx'; const FileSaver = require('file-saver'); import { getRandomNum } from '@/utils'; // Local export table/** * Export Excel file * @param {*} elementName table component id name * @param {*} fileName filename * @description Instructions * import { exportsXlsx } from '@/utils/localExports'; * exportsXlsx('idName', 'file name'); */ export function exportsXlsx(elementName, fileName) { const time = new Date().getTime(); const random = getRandomNum(100, 1000); const wb = .table_to_book(clearHead(elementName), { raw: true }); const wbout = (wb, { bookType: 'xlsx', bookSST: true, type: 'array' }); (new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}${time}-${random}.xlsx`); } function clearHead(elementName) { const tableDom = ('#' + elementName).cloneNode(true); const tableHeader = ('.el-table__header-wrapper'); const tableBody = ('.el-table__body'); [0].append([1]); const headerDom = [0].querySelectorAll('th'); // Remove the node of the checkbox on the left if (headerDom[0].querySelectorAll('.el-checkbox')) { headerDom[0].remove(); } for (const key in headerDom) { if (headerDom[key].innerText === 'operate') { headerDom[key].remove(); } } // Clean up checkbox and operation buttons const tableList = [0].childNodes[2].querySelectorAll('td'); for (let key = 0; key < ; key++) { if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) { tableList[key].remove(); } } return tableHeader; }
4: How to use
<el-table 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', 'Simulated data'); }, }
5: good is the id of the table component, the getRamdomNum method is as follows
// Generate random numbersexport function getRandomNum(Min, Max) { var Range = Max - Min; var Rand = (); return (Min + (Rand * Range)); }
This is the end of this article about vue exporting using file-saver local files. For more related vue file-saver local files export content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!