Vue+springboot Excel文件下载功能实现

Vue+springboot Excel文件下载功能实现

需求：在前端界面点击下载按钮就能把后端中某个Excel文件下载

功能展示：

点击下载模版后，自动在浏览器中下载了该excel文件

前端代码
1、获取后端数据api

import request from '@/router/axios'

export function getEexcel() {
  return request({
    url: '/vocs/download/reaction', //与后面的后端接口对应
    method: 'get',
    responseType: 'blob'
  })
}

2、下载按钮

<el-button size="small" type="primary" @click="handleGet">
下载模版</el-button>

3、下载Excel操作的js代码

//导入上面定义的api
import { getEexcel } from "@/api/atmospheric_reaction_in"
//写按钮的方法
methods:{
    handleGet(){
      getEexcel().then((res)=>{
        console.info(res.data)
        let blob = new Blob([res.data], {type: 'data:application/vnd.ms-excel;base64;charset=utf-8'});

        let downloadElement = document.createElement('a');

        let href = window.URL.createObjectURL(blob); //创建下载的链接

        downloadElement.href = href;

        downloadElement.download = 'abc'+'.xlsx'; //下载后文件名

        document.body.appendChild(downloadElement);

        downloadElement.click(); //点击下载

        document.body.removeChild(downloadElement); //下载完成移除元素

        window.URL.revokeObjectURL(href); //释放掉blob对象

        return true
      })
    },
}

后端实现

import cn.hutool.core.io.resource.ClassPathResource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;

@RestController
@RequestMapping("/download")
public class DownloadExcel {
	@GetMapping("/reaction")
	public void reactionDownload(HttpServletResponse response)throws Exception{
		String path = "excelfiles/demo.xlsx"; ###后端中对应的excel文件目录
		response.setContentType("application/force-download"); //强制下载
		response.setHeader("Content-Disposition","attachement;filename=demo.xlsx");
		ClassPathResource resource = new ClassPathResource(path);
		InputStream input = resource.getStream();
		byte data[] = new byte[1024];
		int len = 0;
		while ((len = input.read(data)) != -1){
			response.getOutputStream().write(data,0,len);
		}
	}
}