Vue2中如何通过JavaScript下载指定URL的.js文件？

你当前的代码错误在于把API返回的path字符串直接塞进了Blob里，所以下载的文件自然只是那个URL文本，而不是实际的脚本文件内容。下面是两种可行的解决方法：

方法一：直接利用目标URL下载（简单快捷，需跨域允许） #

如果目标文件的服务器允许跨域访问，直接创建指向res.data.path的下载链接即可，无需额外请求文件内容：

downloadScript() {
  ApiService.post(`url`).then((res) => {
    try {
      const anchor = document.createElement("a");
      anchor.href = res.data.path;
      anchor.setAttribute("download", "script.js");
      // 处理某些浏览器需要添加到DOM才能触发下载的情况
      document.body.appendChild(anchor);
      anchor.click();
      document.body.removeChild(anchor);
    } catch (err) {
      console.error('下载失败:', err);
    }
  });
}

方法二：先请求文件内容再生成Blob下载（适配跨域场景） #

如果目标URL存在跨域限制，需要先通过Axios获取文件的二进制内容，再生成Blob进行下载：

downloadScript() {
  ApiService.post(`url`).then((res) => {
    // 用Axios请求目标文件，responseType设为blob获取二进制数据
    return axios.get(res.data.path, { responseType: 'blob' });
  }).then((fileRes) => {
    try {
      const url = window.URL.createObjectURL(fileRes.data);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.setAttribute("download", "script.js");
      document.body.appendChild(anchor);
      anchor.click();
      // 释放URL对象，避免内存泄漏
      window.URL.revokeObjectURL(url);
      document.body.removeChild(anchor);
    } catch (err) {
      console.error('下载失败:', err);
    }
  }).catch(err => {
    console.error('请求文件地址失败:', err);
  });
}

注意事项 #

• 方法一需要目标服务器配置Access-Control-Allow-Origin允许你的前端域名访问，否则浏览器会拦截跨域请求。
• 方法二中要确保Axios的responseType设置为blob，这样才能正确获取文件的二进制内容。

内容的提问来源于stack exchange，提问作者Osman Rafi