欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年01月07日 15:36:37   作者:前端辣白菜  
這篇文章主要介紹了vue使用file-saver本地文件導(dǎo)出,大家需要安裝xlsx和file-saver,然后創(chuàng)建localExports.js文件,具體實現(xiàn)代碼跟隨小編一起看看吧

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名稱
 * @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');
 
  // 移除左側(cè)checkbox的節(jié)點
  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', '模擬數(shù)據(jù)');
    
    },
}

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


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

到此這篇關(guān)于vue使用file-saver本地文件導(dǎo)出的文章就介紹到這了,更多相關(guān)vue file-saver本地文件導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)

    VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)

    使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當前位置的詳細信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • Vue.js第三天學(xué)習(xí)筆記(計算屬性computed)

    Vue.js第三天學(xué)習(xí)筆記(計算屬性computed)

    這篇文章主要為大家詳細介紹了Vue.js第三天的學(xué)習(xí)筆記,vue.js計算屬性computed,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例

    Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例

    本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例,重點在于切換路由的時候,重新拉取列表數(shù)據(jù),接下來看看實現(xiàn)方法吧
    2021-05-05
  • maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作

    maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作

    這篇文章主要介紹了maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue3中使用富文本編輯器的示例詳解

    Vue3中使用富文本編輯器的示例詳解

    這篇文章主要為大家詳細介紹了Vue3中使用富文本編輯器的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以參考一下
    2023-10-10
  • Element InfiniteScroll無限滾動的具體使用方法

    Element InfiniteScroll無限滾動的具體使用方法

    這篇文章主要介紹了Element InfiniteScroll無限滾動的具體使用方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue-echarts如何實現(xiàn)圖表組件封裝詳解

    vue-echarts如何實現(xiàn)圖表組件封裝詳解

    由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關(guān)于vue-echarts如何實現(xiàn)圖表組件封裝的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解

    Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解

    在Vue2.x中,編寫組件的方式是使用Options API,它的特點是在對應(yīng)的屬性中編寫對應(yīng)的功能模塊,這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下
    2022-10-10
  • VUE?html5-qrcode實現(xiàn)H5掃一掃功能實例

    VUE?html5-qrcode實現(xiàn)H5掃一掃功能實例

    這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級和跨平臺的QR碼和條形碼掃碼的JS庫,集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下
    2023-08-08
  • 淺談webpack編譯vue項目生成的代碼探索

    淺談webpack編譯vue項目生成的代碼探索

    本篇文章主要介紹了淺談webpack編譯vue項目生成的代碼探索,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論