前端 react + js实现 静态文件下载 流式下载 文件下载的方法和代码封装

常见的下载方式有三种

1. 普通下载：后端返回一长串字符串，期望前端按照文本的方式下载；
2. 后端返回的文件，期望可以按照文件下载
3. 流式下载

接下来开始讲解代码，可直接复制方法，全局使用

1. 第一种，普通下载，后端给到你的数据是下图这样

   直接上代码

/**  @param text 文本内容  @param filename 文件名称 **/ export function download(text: string, filename?: string) {  const element = document.createElement('a');  const file = new Blob([text], { type: 'text/plain' });  element.href = URL.createObjectURL(file);  element.download = filename ?? 'demo';  document.body.appendChild(element);  element.click();  document.body.removeChild(element);}

1. 第二种，流式下载，后端给到你的数据是下图这样

   直接上代码

/**  @param content 流  @param filename 文件名称 **/  export function downImgFile(filename: any, content: any) {  const csvData = new Blob([content]);  // 兼容IE  if (window.navigator.msSaveOrOpenBlob) {    window.navigator.msSaveOrOpenBlob(csvData, file_name);  } else {    let a = document.createElement('a');    document.body.appendChild(a);    a.style = 'display: none';    const url = window.URL.createObjectURL(csvData);    a.href = url;    a.download = filename;    a.click();    a.remove();    window.URL.revokeObjectURL(url);  }}

1. 文件下载，没图直接上代码，用fetch 封装的

/**  @param url 接口地址  @param filename 文件名称  @param method 请求类型 GET POST **/  export function fileDownloadFunc(url: any, filename?: any, method?: any) {  return fetch(`${url}`, {    method: method || 'get',    credentials: 'include',    headers: new Headers({      'Content-Type': 'application/json',      ...getHeaders(),    }),    responseType: 'blob',  })    .then((response) => {      response.blob().then((blob) => {        let blobUrl = window.URL.createObjectURL(blob);        const aElement = document.createElement('a');        document.body.appendChild(aElement);        aElement.style.display = 'none';        aElement.href = blobUrl;        const name =          response.headers.get('content-disposition')?.split('=')[1] || '';        aElement.download = filename ? filename : window.decodeURI(name);        aElement.click();        document.body.removeChild(aElement);      });    })    .catch((error) => {});}

希望可以给大家带来帮助