技術標籤：vue.js

普歌–前端研發叢集–Vue使用echarts匯出表格

npm install echarts --save

在main.js中引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(echarts)

安裝以下三個依賴
npm install -S file-saver

 npm install -S xlsx

 npm install -D script-loader

在src目錄下，新建vendor資料夾，點選下載Blod和Exoirt2Excel

下載後引入vendor資料夾下

更改Export2Excel資料夾下的內容

在main.js中引入Blob和Export2Excel
import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'

找一個頁面，按鈕點選事件為downloadExcel

downloadExcel(){
this.$confirm(‘確定下載列表檔案?’, ‘提示’, {
confirmButtonText: ‘確定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}).then(() => {

this.list = this.seenumber
//你要匯出的資料list
this.export2Excel()
}).catch(() => {
})
},
//資料寫入excel
export2Excel() {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require(’@/vendor/Export2Excel’); //注意這裡的路徑
// 匯出的表頭名資訊
const tHeader = [‘學號’,‘姓名’,‘手機號’,‘專業’];
const filterVal = [‘stuNumber’,‘name’, ‘phoneNumber’, ‘major’]; // 匯出的表頭欄位名，需要匯出表格欄位名
const list = that.list;
const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, '表格資訊excel');// 匯出的表格名稱，根據需要自己命名
      })
    },

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201221131321985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5NTAwODY0,size_16,color_FFFFFF,t_70)