ant design vue做导入导出excel

1.不调用后端接口做导出excel：

在页面上写触发的按钮：@click="outTab(方法名)"

          type="primary"

          @click="outTab"

>导出

在script-method中写：

// 点击导出

    outTab () {

      require.ensure([], () => {

        const { export_json_to_excel } = require('@/Excel/Export2Excel') //注意这个Export2Excel路径

        const tHeader = ['姓名', '性别', '年龄', '手机号', '邮箱', '岗位', '级别', '工作年限', '所属公司', '在职状态', '是否在项目'] // 上面设置Excel的表格第一行的标题

        const filterVal = ['name', 'sex', 'age', 'phone', 'email', 'postName', 'level', 'workingYears', 'company', 'state', 'isProject'] // 上面的index、nickName、name是tableData里对象的属性key值

        const list = this.staffList //把要导出的数据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]))

    },

把表格跟你自己的数据表格Excel的表格第一行的标题对应上就行，其他的直接复制不需要改！

2.调用后端的接口进行导出excel

在页面上写触发的按钮：按钮上加一个a标签，a标签的地址就是调用后端的接口地址(如果接口需要参数则像我一样把每个参数加上，我这里判断他是否等于undefined的原因是我这里是下拉框，如果没有参数直接:href="uploadUrl+'/v1/employee/getExecl'"即可，uploadUrl是我的全局地址，如：http://172.18.101.57:8001/，换成自己的地址就行)

        :href="uploadUrl+'/v1/employee/getExecl?companyId='+(this.form.selectCompany==undefined?'':this.form.selectCompany)+

      '&postId='+(this.form.selectPost==undefined?'':this.form.selectPost)+'&name='+this.form.inputName">

       

          type="primary"

        >导出

     

这样就直接导出自动下载了，不需要再加任何东西！