如何将Vue中表格数据，以Excel格式导出？报saveAs错误如何解决？

一、安装依赖

 

    npm install file-saver --save

    npm install xlsx --save

    npm install script-loader --save-dev

 

二、下载两个所需的js文件Blob.js和Export2Excel.js

    链接： https://pan.baidu.com/s/1CNcEncW-fjFDyinEo5J2Qw

    提取码：5qwz

 

三、在src目录下新建vendor文件夹、将Blob.js和Export2Excel.js两个文件放进去

 

四、Vue部分(UI用的ElmentUI)

HTML:

<el-button type="primary" size="medium" @click="export2Excel">导出</el-button>

<el-table-column type="selection" width="35" v-model="multipleSelection">
</el-table-column>

data()：

data() {
    return {
        multipleSelection: [],
    }
},

methods：

//导出表格
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
    if (this.multipleSelection.length) {
        import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
            const filterVal = ['id', 'name', 'number', 'shopId', 'desc']
            const list = this.multipleSelection
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel(tHeader, data, 'table')
        })
    } else {
        this.$message({
            message: '请至少勾选一项，再进行操作',
            type: 'warning'
        });

    }
}

注：如果出现saveAs错误，多半是依赖包file-saver的版本有错，换一个版本，npm i file-saver@1.3.3 ，再试试看是否已经好了呢？！