前端文件下载有哪几种几种方式？收藏这篇就够了

L4阶段：大模型的微调和私有化部署，我们会更加深入的探讨Transformer架构，学习大模型的微调技术，利用DeepSpeed、Lamam Factory等工具快速进行模型微调；而L3 L4更多的是通过项目实战来掌握大模型的应用开发，针对以上大模型的学习路线我们也整理了对应的学习视频教程，和配套的学习资料。带AI团队，微调大模型要准备多少数据，你不懂；在你已经掌握了大模型技术之后，就需要开始准备

Python_chichi

568人浏览 · 2025-12-31 10:58:35

Python_chichi · 2025-12-31 10:58:35 发布

前端文件下载的几种方式

- - 具体实现
  - - 1、window.open(url, target)
    - 2、location.href
    - 3、超链接下载
    - 4、使用 form 表单下载
    - 5、二进制流数据下载
    - 6、file-saver 下载
    - 7、本地下载（el-upload 文件未上传到服务器）
    - 8、使用 canvas 进行图片下载

前端实现文件下载通常分为两种情形：

一种是后端直接提供了文件地址，通过浏览器打开就可以实现下载。

另外一种是需要发送请求，后端返回二进制流数据，前端解析二进制流数据，生成 URL，实现下载。

具体实现

1、window.open(url, target)

第一个参数 url 就是文件地址；
第二个参数 target，指定加载资源的位置，参数值主要有四种分别是：
- _self：当前页面加载。
- _blank：通常在新标签页面打开，但用户可以通过配置选择在新窗口打开，默认值。
- _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与_self相同。
- _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

文件下载不太推荐使用_blank，因为使用该关键字，当前窗口会闪现出一个无标题的新窗口，虽然下载完成后，新窗口会消失，但是比较影响用户体验感，不推荐。
代码如下：

function download(url) {
  // window.open(url)
  // window.open(url, "_blank");
  window.open(url, "_self");
  // window.open(url, "_parent");
  // window.open(url, "_top")
}

2、location.href

代码如下：

function download(url) {
  location.href = url;
}

3、超链接下载

代码如下：

function download(url) {
  let a = document.createElement("a");
  // 指定下载链接
  a.href = url;
  // 指定文件名称
  a.download = fileName;
  a.click();
  a.remove();
}

注意：

如果下载链接是由后端直接提供的地址，前端指定的文件名称一般不会生效，默认是后端指定的文件名称，如：接口的响应头中的content-disposition字段指定attachment;filename=xxx.xls;
文件下载/打开过程中出现的各种警告：
- 文件打开过程中提示文件损坏（代码性错误）：一般是指定的文件名称和文件本身的文件名不一致
- Edge 浏览器提示无法安全下载：下载链接和当前系统的协议不一致，如果是下载链接的协议是 http，需要改成 https。

4、使用 form 表单下载

function download(url) {
  let form = document.createElement("form");
  form.setAttribute("action", url);
  document.querySelector("body").appendChild(form);
  console.log(form);
  form.submit();
}

需要注意的是，该 url 请求只能是 get 请求

5、二进制流数据下载

代码如下：

function download(url, data, fileName, type) {
  // 加载状态
  loading = true;
  // 文件下载接口请求一般需要指定responseType为"blob"，否则可能出现文件损坏甚至无法打开的问题
  axios
    .post(url, data, {
      responseType: "blob",
    })
    .then((res) => {
      loading = false;
      let blob = new Blob([res.data], {
        // 如果后端没有返回下载文件类型，则需要手动设置
        type: res.headers["content-type"] || type,
      });
      let URL = window.URL || window.webkitURL; //兼容IE
      let href = URL.createObjectURL(blob); //创建下载的链接
      let a = document.createElement("a");
      a.href = href;
      // 指定文件名称有效
      a.download = fileName;
      a.click();
      a.remove(); // 删除临时元素
      URL.revokeObjectURL(a.href); //清空内存
    })
    .catch((e) => {
      loading = false;
    });
}

6、file-saver 下载

import { saveAs } from "file-saver"

download(url, data, fileName, type) {
  // 加载状态
  this.loading = true;
  // 文件下载接口请求一般需要指定responseType为"blob"，否则可能出现文件损坏甚至无法打开的问题
  axios
    .post(url, data, {
      responseType: "blob",
    })
    .then((res) => {
      this.loading = false;
      let blob = new Blob([res.data], {
        // 如果后端没有返回下载文件类型，则需要手动设置
        type: res.headers["content-type"] || type,
      });
      saveAs(blob, fileName);
    })
    .catch((e) => {
      this.loading = false;
    });
}

7、本地下载（el-upload 文件未上传到服务器）

handlePreview(file){
  this.loading = true;
  // el-upload组件中文件没有上传到服务器，文件状态显示为ready
  try{
    if(file.status == "ready"){
      // 第一种
      // let blob = new Blob([file.raw], {type: file.raw.type });
      // // saveAs(blob, fileName);

      // 第二种
      // let blob = new Blob([file.raw], {type: file.raw.type })
      // let URL = window.URL || window.webkitURL;
      // let url = URL.createObjectURL(blob);
      // let a = document.createElement("a");
      // a.href = url;
      // a.download = file.name;
      // a.click();
      // URL.revokeObjectURL(a.href); //清理内存
      // a.remove(); // 删除临时元素

      // 第三种
      saveAs(file.raw, file.name);

      this.loading = false;
      return;
    }
  }catch(){
    this.loading = false;
  }
}

8、使用 canvas 进行图片下载

为什么：防止浏览器自动打开图片
处理 canvas 绘制图片模糊的问题：引入 hidpi-canvas-polyfill 插件

function donwloadIMG() {
  let img = document.querySelector("img");
  // 创建一个画布
  let canvas = document.createElement("canvas");
  // 设置画布的展示
  let context = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;

  canvas.style.width = img.width + "px";
  canvas.style.height = img.height + "px";
  // 处理canvas绘制图片模糊的问题-引入hidpi-canvas-polyfill插件
  let ratio = getPixelRatio(context);
  context.drawImage(img, 0, 0, img.width * ratio, img.height * ratio);
  const url = canvas.toDataURL("image/jpeg", 1);

  // 添加到body标签上进行展示下载的图片
  document.body.appendChild(canvas);

  // 此处是下载代码
  let a = document.createElement("a");
  a.href = url;
  a.download = "1.jpeg";
  a.click();
}
function getPixelRatio(ctx) {
  let backingStore =
    ctx.backingStorePixelRatio ||
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    1;
  let ratio = (window.devicePixelRatio || 1) / backingStore;
  return ratio;
}

2025开年，AI技术打得火热，正在改变前端人的职业命运：