vue下载excel直接上代码

1.使用vue的el-button标签定义一个点击事件

<el-form-item>

        <el-button size="small" type="text" @click="downloadTemplate">下载模板</el-button>

</el-form-item>

2.downloadTemplate下载模板方法

 //下载excel模板
    downloadTemplate(){
        
        axios({
            url: this.$http.adornUrl('localhost:8080/demo/export'),
            method: 'POST',
            responseType: 'blob', //不可省，非常重要
            headers: { // 设置请求头
              token: Vue.cookie.get('token')//你的token认证
            }
          }).then(res => {
            let fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1]);
            let contentType = res.headers['content-type'];
            let blob = new Blob([res.data], {type: contentType + ';charset=utf-8'});
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          })

      },

3.Java后台接口代码

 /**
     * 模板下载
     * @param response
     */
    @RequestMapping("/export")
    public void moduleExport(HttpServletResponse response){
       
        ExcelFactory.createWriter(QuestionExcelVo.class, response)
                .valid(true)
                .write(null,subjectMap)
                .flush();
    }