前端与后端联调接口之----导出功能

我们先把接口写在接口的api中

import request from "../http";//引的是axios的二次封装
 
export function importExecl(data) {
    return request({
        url:"/api/importExecl",
        method:"post",
        data:data
    })
}

接口写完，这个时候我们需要在“导出”的时候进行如下操作：

<template>
    <div>
        <el-button @click="importExecl">导出</el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import { importExecl } from "./api";
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []
        }
    },

    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 下载的方法
        download(url, fileName) {
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', fileName);
            link.click();
        },
        importExecl() {
            if (
                this.multipleSelection.length === 0
            ) {
                this.$message({
                    message: "请先勾选数据",
                    type: "warning",
                });
                return;
            }
            const params = {
                data: {
                    id: "",
                },
            };
            this.multipleSelection.forEach((item) => {
                params.data.id += item.id + ",";
            });
            try {
                importExecl(params).then((data) => {
                    this.download(data.resultdata, params);//data.resultdata是execl的那个地址
                });
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

这个导出功能就可以完全展示出来了