日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

vue中怎么导出excel文件

發布時間:2023/12/31 综合教程 20 生活家
生活随笔 收集整理的這篇文章主要介紹了 vue中怎么导出excel文件 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天再開發中遇到一件事情,就是怎樣用已有數據導出excel文件,網上有許多方法,有說用數據流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是現在我的想法是只是用數組數據,不接著與數據流的方式去實現,事實證明是可以的:

1.安裝依賴

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2.在main.js中進行導入Bolb.js與Export2Excel.js

兩個js文件地址:

鏈接:https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取碼:sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

3.在組件中使用

//導出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序號', '昵稱', '姓名'];
        // 上面設置Excel的表格第一行的標題
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里對象的屬性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

tHeader是表頭,filterVal 中的數據是表格的字段,tableData中存放表格里的數據,類型為數組,里面存放對象,表格的每一行為一個對象。

如此,就可以了。

相關推薦:

2020年前端vue面試題大匯總(附答案)

vue教程推薦:2020最新的5個vue.js視頻教程精選

更多編程相關知識,請訪問:編程教學!!

總結

以上是生活随笔為你收集整理的vue中怎么导出excel文件的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。