Vue + Springboot实现xlsx

最新推荐文章于 2024-08-17 21:24:20 发布

羊不白丶

最新推荐文章于 2024-08-17 21:24:20 发布

阅读量137

点赞数

文章标签： spring boot java javascript

本文链接：https://blog.csdn.net/weixin_45322373/article/details/129136502

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue前端通过点击按钮调用API，利用Blob处理响应并触发文件下载。后端使用SpringBoot处理GET请求，读取指定路径的xlsx文件，设置response内容类型和Content-Disposition头，实现文件下载功能。

摘要由CSDN通过智能技术生成

Vue

网页vue文件

<template>
  <div>
    <el-button type="primary" @click="handleDownload"> 主要按钮 </el-button>
  </div>
</template>

<script>
import { getDownLoadFile } from "@/api/index";
export default {
  data() {
    return {};
  },
  methods: {
    handleDownload() {
      getDownLoadFile()
    },
  },
};
</script>

index.js - 用于包装请求

export function getDownLoadFile() {
    return request({
        url: "/info/data/getDownLoadFile",
        method: "get",
        responseType: "blob", //必须要填写
    })
}

src/util/request文件 - request进来先运行这个文件的内容

const downloadUrl = res => {
  const blob = new Blob([res.data], { type: res.data.type })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob)
  downloadElement.href = href
  if (res.headers['content-disposition'] != null) {
    downloadElement.download = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', ''))
  } else {
    downloadElement.download = "模板文件.xlsx"
  }
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href)
}

SpringBoot

    @GetMapping("/getDownLoadFile")
    public void getDownLoadFile(HttpServletResponse response) throws IOException {
        //获取文件路径
        String filePath = "E:/360MoveData/Users/11617/Desktop/节点矩阵.xlsx";
        File file = new File(filePath);
        InputStream fis = new BufferedInputStream(new FileInputStream(file));
        byte[] buffer = new byte[fis.available()];
        fis.read(buffer);
        fis.close();
        response.reset();
        // 设置response的Header
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); //xlsx
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Content-Disposition", "attachment;filename=" + "document" + ".xlsx");
        // response.setHeader("Access-Control-Expose-Headers","Content-Disposition");

        OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
        toClient.write(buffer);
        toClient.flush();
        toClient.close();
    }