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 {*} 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; }
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', '模擬數據'); }, }
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本地文件導出內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- elementUI+Springboot實現導出excel功能的全過程
- vue完美實現el-table列寬自適應
- JavaScript實現導入導出excel的示例代碼
- el-table表頭根據內容自適應完美解決表頭錯位和固定列錯位
- js實現根據文件url批量壓縮下載成zip包