vue+springboot下载文件

在Vue和Spring Boot中实现文件下载的方法有多种。根据提供的引用内容，我们可以使用文件流的方式来实现。首先，在Vue的前端代码中需要定义一个下载文件的方法，可以通过点击按钮触发该方法。

在Vue的前端代码中，我们可以使用Element UI等前端框架来创建一个按钮，绑定一个click事件方法，例如：

<template>
  <div>
    <el-button size="medium" type="success" plain @click="downLoadFile">下载</el-button>
  </div>
</template>

接着，在Vue的JavaScript逻辑部分，使用axios调用后端接口来进行文件的下载。具体的JavaScript代码如下所示：

export default {
  name: "xxx",
  data() {
    return {
      filePath: 'D:\file\文件名称.pdf', // 文件路径
      fileName: '文件名称.pdf', // 文件名称
    }
  },
  methods: {
    // 下载文件方法
    downLoadFile() {
      this.$axios.get("/downFile/downLoadFile", {
        params: {
          path: this.filePath,
          name: this.fileName
        },
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data]);
        const fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
        if ('download' in document.createElement("a")) {
          const link = document.createElement("a");
          link.download = fileName;
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      })
    }
  },
}

在上述代码中，我们通过axios发送GET请求到后端接口`"/downFile/downLoadFile"`，并传递文件的路径和名称作为请求参数。同时，我们指定了`responseType`为`blob`，以便获取到文件的二进制数据。在获取到文件数据后，我们将其保存为Blob对象，并使用创建的下载链接进行文件的下载。

请注意，以上代码仅为示例，实际的路径和文件名需要根据具体情况进行修改。此外，需要确保后端接口正确处理文件下载请求，并返回文件的二进制数据。

综上所述，以上代码演示了在Vue和Spring Boot中实现文件下载的方法，你可以根据需要进行调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
#### 引用[.reference_title]
- *1* *2* *3* *4* [vue+springboot使用文件流实现文件下载](https://blog.csdn.net/xc9711/article/details/127485603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]