vue实现请求一次接口，获取文件地址并下载文件

在 Vue.js 中，你可以通过以下步骤实现点击按钮后请求接口获取文件地址并下载文件：

1. 创建一个点击事件处理函数：在 Vue 组件中定义一个方法，用于处理按钮点击事件。

2. 请求接口获取文件地址：使用 axios 或其他 HTTP 客户端库发送请求，获取文件的下载地址。

3. 下载文件：获取到文件地址后，通过创建一个隐藏的 <a> 标签并触发点击事件来实现文件下载。

以下是一个完整的示例代码：

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

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      try {
        // 1. 请求接口获取文件地址
        const response = await axios.get('https://your-api-endpoint.com/get-file-url', {
          params: {
            // 如果有参数可以在这里传递
          }
        });

        // 2. 获取文件地址
        const fileUrl = response.data.fileUrl; // 假设接口返回的数据中包含 fileUrl 字段

        // 3. 创建一个隐藏的 <a> 标签并触发点击事件来下载文件
        const link = document.createElement('a');
        link.href = fileUrl;
        link.setAttribute('download', ''); // 设置 download 属性，确保文件下载而不是在新页面打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下载完成后移除 <a> 标签
      } catch (error) {
        console.error('下载文件失败:', error);
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

代码说明：

1. downloadFile 方法：

   • 使用 axios.get 请求接口获取文件地址。
   • 从响应中提取文件地址 fileUrl。
   • 创建一个隐藏的 <a> 标签，设置其 href 属性为文件地址，并添加 download 属性以确保文件下载而不是在新页面打开。
   • 触发 <a> 标签的点击事件来下载文件。
   • 下载完成后移除 <a> 标签。

2. 错误处理：

   • 使用 try-catch 捕获请求过程中可能出现的错误，并在控制台输出错误信息。

注意事项：

• 跨域问题：如果文件地址跨域，可能需要服务器配置 CORS 或使用代理。
• 文件类型：确保服务器返回的文件地址是正确的，并且文件类型是浏览器支持下载的类型。
• 安全性：如果文件地址是动态生成的，确保接口的安全性，防止恶意文件下载。

通过这种方式，