Nuxt.js点击按钮调用函数返回href实现下载失败求助

你遇到的问题根源是异步请求的时序错误，加上几处细节问题：

1. getmyurl() 里的XMLHttpRequest是异步操作，函数会直接返回初始空字符串myurl，等请求完成后再赋值时，href已经渲染完毕，所以始终为空。
2. 响应解析错误：xhr.response是原始字符串，没有转成JSON对象；且键名大小写不匹配——Netlify返回的是getUrl，你写的是Geturl，即使拿到响应也无法正确赋值。
3. 在:href中直接调用异步函数的方式本身不合理，Vue渲染时会立即执行函数，此时异步请求还未完成。

1. 调整模板结构 #

移除<a>标签嵌套，直接给按钮绑定点击事件，在事件中处理下载逻辑：

<BaseButton
  v-if="order.status === 'complete'"
  fit="auto"
  appearance="light"
  label="Download"
  @click="handleDownload"
/>

2. 修改脚本逻辑 #

用async/await处理异步请求，拿到预签名URL后创建临时<a>标签触发下载：

data() {
  return {
    signedUrl: ''
  }
},
methods: {
  async handleDownload() {
    try {
      const funcurl = '<<MY_NETLIFY_FUNCTION_URL>>';
      // 发起异步请求
      const response = await fetch(funcurl);
      if (!response.ok) throw new Error(`请求失败: ${response.status}`);
      // 解析JSON响应
      const data = await response.json();
      // 存储预签名URL（注意键名和Netlify返回一致）
      this.signedUrl = data.getUrl;

      // 创建临时a标签触发下载
      const tempLink = document.createElement('a');
      tempLink.href = this.signedUrl;
      tempLink.download = '<<MY_PRODUCT_NAME>>';
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    } catch (error) {
      alert(`下载失败: ${error.message}`);
    }
  }
}

3. 验证Netlify函数细节 #

确保你的Netlify函数返回的getUrl是有效的S3预签名URL，可以在函数中添加console.log(getUrl)，通过Netlify控制台查看输出，确认URL格式正确。

内容的提问来源于stack exchange，提问作者scott clayton