vue + easyexcel 前后端分离实现文件下载

最新推荐文章于 2024-06-21 22:25:08 发布

MIDSUMMER_yy

最新推荐文章于 2024-06-21 22:25:08 发布

阅读量1.2k

点赞数 3

分类专栏： java后端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38151907/article/details/127646082

版权

java后端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

vue + easyexcel 前后端分离实现文件下载

maven依赖导入

		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>easyexcel</artifactId>
			<version>2.2.10</version>
		</dependency>

后端接口样例如下

@PostMapping("download")
    public void download(@RequestParam Map<String, Object> params,HttpServletResponse response){
        
        OutputStream os = null;
        QueryWrapper<xxx> queryWrapper=new QueryWrapper<>();

       //TODO这里加条件
        List<xxx> list=xxxService.list(queryWrapper);

try {
            String fileName = URLEncoder.encode("xxx","UTF-8");
            os = response.getOutputStream();
            response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");
            response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
            EasyExcel.write(os, ZhModelListEntity.class).sheet("xxx").doWrite(list);
        }catch (IOException e){
            e.printStackTrace();
        }

前端下载样例

download() {
      this.$http({
        url: this.$http.adornUrl("xxx"),
        method: "post",
        responseType:'blob',
        params: this.$http.adornParams({
          value: this.value,
        }),
      }).then(
        function (res) {
        // 得到请求到的数据后，对数据进行处理
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
        let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名称,decodeURI：可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
        // console.log(fileName)
        if (fileName) {// 根据后端返回的数据处理文件名称
          fileName = fileName.substring(fileName.indexOf('=') + 1);
        }
        const link = document.createElement('a')// 创建一个a标签
        link.download = fileName;// 设置a标签的下载属性
        link.style.display = 'none';// 将a标签设置为隐藏
        link.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
        document.body.appendChild(link);// 将a标签添加到body中
        link.click();// 执行a标签的点击方法
        URL.revokeObjectURL(link.href) // 下载完成释放URL 对象
        document.body.removeChild(link)// 移除a标签
        
      })
    },