vue項目中導出excel表格數據

一、需要安裝三個依賴：

             npm install -S file-saver xlsx

             npm install -D script-loader

 

二、項目中新建文件夾（文件名excel）

里面放置兩個文件Blob.js和 Export2Excel.js。

下載鏈接：https://pan.baidu.com/s/1fjSFq-XMLKFG2qVhhjSzGA 

提取碼：bo09 
復制這段內容后打開百度網盤手機App，操作更方便哦

 

三、在vue的methods方法中：

頁面添加導出按鈕，加入方法

 

 //導出書刊列表數據
            exportData(){
                this._getBookExport()
            },
            _getBookExport(){
                let exportBook = {
                    libraryId:this.libraryId,
                    isbnOrIssn:this.isbnOrIssn,
                    category:this.category,
                    bookSn:this.bookSn,
                    status:this.status,
                }
                getBookExport(exportBook).then(res=>{
                    if(res.data.errcode === 0){
                        this.exportList = res.data.data
                        this.export2Excel()
                    } else if (res.data.errcode === 40190){
                        this.$Message.info('數據太多無法導出，請聯系客服！')
                    }
                })
            },
            export2Excel() {
    　　　　　　require.ensure([], () => {
    　　　　　　　　const { export_json_to_excel } = require('../../excel/Export2Excel');
    　　　　　　　　const tHeader = ['書刊編號', '書刊名稱', 'ISBN/ISSN', '索取號', '定價','類別'];
    　　　　　　　　const filterVal = ['bookSn', 'title', 'isbnOrIssn', 'callNumber', 'price','category'];
    　　　　　　　　const list = this.exportList;
    　　　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　　　export_json_to_excel(tHeader, data, '書刊數據');
    　　　　　　})
    　　　　},
    　　　　formatJson(filterVal, jsonData) {
    　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　　　}

 

四、假如項目有很多個導出，每個都寫就太麻煩了

可以提取到一個js文件中

export function export2Excel(columns,list){
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel');
        let tHeader = []
        let filterVal = []
        columns.forEach(item =>{
            tHeader.push(item.title)
            filterVal.push(item.key)
        })
        const data = list.map(v => filterVal.map(j => v[j]))
        export_json_to_excel(tHeader, data, '數據列表');
    })
}

　在需要的頁面import引入

import { export2Excel } from '@/common/js/util'

 

 exportData(){
        let info = {from: 0,size: 300} 
        getDonateList(info).then(res =>{
            if(res.data.errcode === 0){
                this.exportList = this.formatList(res.data.data.records)
                export2Excel(this.columns1,this.exportList)
            } else if (res.data.errcode === 40190){
                this.$Message.info('數據太多無法導出，請聯系客服！')
            }
        })
    }