vue中怎么使用file-saver本地文件導(dǎo)出功能

這篇文章主要講解了“vue中怎么使用file-saver本地文件導(dǎo)出功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue中怎么使用file-saver本地文件導(dǎo)出功能”吧！

1:安裝xlsx和file-saver

npm install file-saver xlsx  --save

2:創(chuàng)建localExports.js文件

3：直接上代碼

import XLSX from 'xlsx';
const FileSaver = require('file-saver');
import { getRandomNum } from '@/utils';
// 本地導(dǎo)出表格
/**
 * 導(dǎo)出Excel文件
 * @param {*} elementName   table組件id名稱(chēng)
 * @param {*} fileName      文件名
 * @description             使用說(shuō)明
 *                          import { exportsXlsx } from '@/utils/localExports';
 *                          exportsXlsx('idName', '文件名稱(chēng)');
 */
 
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');
 
  // 移除左側(cè)checkbox的節(jié)點(diǎn)
  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', '模擬數(shù)據(jù)');
    
    },
}

5:good為table組件的id，getRamdomNum方法如下

// 生成隨機(jī)數(shù)
export function getRandomNum(Min, Max) {
  var Range = Max - Min;
  var Rand = Math.random();
  return (Min + Math.round(Rand * Range));
}

感謝各位的閱讀，以上就是“vue中怎么使用file-saver本地文件導(dǎo)出功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue中怎么使用file-saver本地文件導(dǎo)出功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！