JS下载文件流（vue）手摸手详细教学

概要

使用场景：前端请求后端的接口，后端返回二进制流，通过处理实现下载

安装：

npm install axios -save

封装下载方法

// ../utils/downLoadFile

import axios from 'axios';

/*
 * @param {string} url 接口地址
 * @param {string} fileName 文件名
*/
export const downLoadFile = (url, fileName) => {
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
  }).then(res => {
    const blob = new Blob([res.data]);
    const url = window.URL.createObjectURL(blob);
    const a= document.createElement('a');
    a.style.display = 'none';
    a.href = url
    a.download = fileName
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a);
  }).catch(error => {
    //错误信息
  });
}

使用：

//引入
import { downLoadFile } from '../utils/downLoadFile';

// 使用方式
downLoadFile('your_api_url', 'fileName');