Vue + Springboot实现xlsx

Vue

网页vue文件

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