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();
}