Vue实现点击按钮下载文件的操作代码(后端Java)

下面是详细讲解“Vue实现点击按钮下载文件的操作代码(后端Java)”的完整攻略：

1. 前端实现

1.1 创建下载按钮

首先，在Vue的组件中添加一个按钮，用来触发下载操作：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

1.2 实现下载功能

在按钮的点击事件中，通过axios请求后端接口来下载文件，代码如下：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      url: '/api/download'
    }
  },
  methods: {
    downloadFile() {
      axios.get(this.url, {
        responseType: 'blob'
      }).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res.data])
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', 'file.jpg')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}
</script>

其中，responseType: 'blob'表示返回的数据是一个二进制流，用Blob对象接收，后面的代码就是先将响应结果（文件）转为Blob格式，然后创建一个a标签，设置下载地址、文件名，并模拟点击来触发下载。

2. 后端实现

2.1 编写下载接口

后端使用Java编写，我们需要实现一个能够返回文件内容的接口：

@GetMapping("/download")
public void download(HttpServletResponse response) throws IOException {
  // 从文件系统中读取文件内容，假设文件为 D:/test.jpg
  File file = new File("D:/test.jpg");
  FileInputStream fis = new FileInputStream(file);
  // 设置响应头，告诉浏览器返回的是文件数据
  response.setContentType("application/octet-stream");
  response.setHeader("Content-Disposition", "attachment;filename=\"" + file.getName() + "\"");
  // 将文件内容写入响应流
  IOUtils.copy(fis, response.getOutputStream());
  response.flushBuffer();
}

以上代码中，我们使用FileInputStream从文件系统中读取文件内容，并将响应头设置为application/octet-stream，表示返回的是二进制流，浏览器会自动弹出文件下载对话框。

2.2 处理跨域请求

如果Vue与后端不在同一域名下，前端的请求会出现跨域问题。我们可以通过CORS来解决跨域问题，具体实现如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

以上代码中，我们添加了一个CORS的全局配置，表示允许所有域名的请求，并支持所有HTTP方法和所有请求头。

3. 示例说明

下面是两个示例，一个是下载 Excel 文件，一个是下载 PDF 文件。

3.1 示例1 - 下载Excel文件

前端代码：

<template>
  <div>
    <button @click="downloadFile">下载 Excel 文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      url: '/api/download/excel'
    }
  },
  methods: {
    downloadFile() {
      axios.get(this.url, {
        responseType: 'blob'
      }).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res.data])
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', 'file.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}
</script>

后端代码：

@GetMapping("/download/excel")
public void downloadExcel(HttpServletResponse response) throws IOException {
  // 从文件系统中读取文件内容，假设文件为 D:/test.xlsx
  File file = new File("D:/test.xlsx");
  FileInputStream fis = new FileInputStream(file);
  // 设置响应头，告诉浏览器返回的是文件数据
  response.setContentType("application/octet-stream");
  response.setHeader("Content-Disposition", "attachment;filename=\"" + file.getName() + "\"");
  // 将文件内容写入响应流
  IOUtils.copy(fis, response.getOutputStream());
  response.flushBuffer();
}

3.2 示例2 - 下载PDF文件