# axios 获取文件 blob 实现下载及预览

# 1. 介绍

通过 axios 获取文件 Blob，实现预览与下载。

此方式与传统的浏览器打开 URL（如 https://abc.com/1.png）的方式不同

# 获取 Blob

GET:

const params = { fileId: '123' };
const blob: Blob = await axios.get(url, { params, responseType: 'blob' });

POST:

const data = { fileId: '123' };
const blob: Blob = await axios.post(url, data, { responseType: 'blob' });

# 下载及预览

import mime from 'mime';

class DownloadUtil {
  downloadFile(blob: Blob, fileName: string) {
    // 注意: 这里要把返回的二进制数据用 File 对象包裹起来
    const file = new window.File([blob], fileName);

    const href = window.URL.createObjectURL(file);

    const anchorElement = document.createElement('a');

    anchorElement.href = href;
    anchorElement.download = fileName;

    document.body.appendChild(anchorElement);
    anchorElement.click();

    document.body.removeChild(anchorElement);
    window.URL.revokeObjectURL(href);
  }

  // 预览（如果浏览器不能解析，则主动下载）
  previewFile(blob: Blob, fileName: string) {
    // 获取文件的 MIME 类型
    const mimeType = mime.getType(fileName) || undefined;

    const previewUrl = window.URL.createObjectURL(new Blob([blob], { type: mimeType }));

    window.open(previewUrl, '_blank');

    URL.revokeObjectURL(previewUrl); // 释放内存
  }
}

# 3. 参考

本章目录