前端实现文件下载功能大全（超好用哦）

前端实现文件下载的几种方式，适用于不同的应用场景。可根据场景选择合适的方法，有问题可私聊我哦。

使用a标签下载（但不可更改名字，名字是返回的文件名）

• 当前域之下

<a href="/api/down"><el-button type="primary" download="">a标签点击</el-button></a>

创建a标签下载文件（可重命名）

• base64地址
• window.URL.createObjectURL()地址
• 本地地址
• 远程地址

function fileDownLoad({ url, name, type }) {
  const downloadElement = document.createElement('a')
  downloadElement.style.display = "none";
  downloadElement.href = url
  downloadElement.download = `${name}${Date.now()}.${type}` // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
}

使用window.open()

• 页面会闪动（无论跨域是否）

 window.open(res.data, '_self')  
 window.open(routeData.href, '_blank')

非当前域下的资源更改名字

// 使用链接下载文件（解决跨域无法更改文件名称问题）
function fileDownLoad({url, name, type}){
  return new Promise((resolve)=>{
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (this.status === 200) {
        const blob = new Blob([this.response]);
        const blobUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = `${name}${Date.now()}.${type}`;
        a.click();
        window.URL.revokeObjectURL(blobUrl);
        resolve(true)
      }else{
        resolve(false)
      }
    };
    xhr.send();
  })
}

fetch or axios

• 前置方法

// 获取base64地址
// obj  从中读取的 Blob 或 File 对象。
async function getFileDataURL(obj) {
  return await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function () {
      resolve(this.result);
    };
    reader.readAsDataURL(obj);
  });
}

// 获取ObjectURL地址
// obj 用于创建 URL 的 File、Blob 或 MediaSource 对象
function getObjectURL(obj) {
  return window.URL.createObjectURL(obj);
}

// 释放ObjectURL空间
function revokeObjectURL(url) {
  try {
    url && URL.revokeObjectURL(url);
  } catch (error) {}
}

• 采用 blob 方式

fetch("/api/getWxQRCode", {
  responseType: "blob",
}).then(async (res) => {
  // 1
  const url = getObjectURL(res.data); // blob
  fileDownLoad({
    url,
    name: "二维码",
    type: "jpg",
  });
  // revokeObjectURL(url)
  
  // 2
  const url = await getFileDataURL(res.data);
  fileDownLoad({
    url,
    name: "二维码",
    type: "jpg",
  });
});

• 采用 arraybuffer 方式

fetch("/api/getWxQRCode", {
  responseType: "arraybuffer",
}).then(async (res) => {
  // 1
  const url = getObjectURL(new Blob([res.data])) // arraybuffer
  fileDownLoad({
    url,
    name: "二维码",
    type: "jpg",
  });
  // revokeObjectURL(url)
  
  // 2
  const url = await getFileDataURL(new Blob([res.data]));
  fileDownLoad({
    url,
    name: "二维码",
    type: "jpg",
  });
});

使用saveAs库（可支持blob、file、url）

npm i file-saver
import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

常见 MIME 类型列表

链接地址: MIME