前端实现下载文件（包含压缩包下载）方式汇总

默认最简单的下载方式是：window.open(后台接口API路径)，但该方法弊端：因是新开窗口方式，前端展示上，每次会闪下。

此外，如果使用window.open(文件URL)方式：

• pdf、office文档、psd：直接下载。
• 图片、txt：新开窗口预览，不会下载；且txt预览，有时出现中文乱码问题。

一、根据文件URL下载

实现原理：通过a标签实现下载。

/*** @method 下载单个文件（文件类型可任意：.png、txt、office文档、.psd等）* @param { String } url - 文件的http完整路径, 如：http: //xxx.png* @param { String } fileName - 文件名，注意是要带文件后缀名，如：xxx.png* @doc https://blog.csdn.net/weixin_39547158/article/details/110851570*/
export function downloadFile(url: string, fileName: string) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.upload.onprogress = (e) => {if (e.lengthComputable) {let progress = e.loaded / e.total;console.log('文件上传进度是', progress);}};xhr.onload = function () {const url = window.URL.createObjectURL(xhr.response);const eleLink = document.createElement('a');eleLink.href = url;eleLink.download = `${fileName}`;eleLink.style.display = 'none';document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);resolve('success');};xhr.onerror = (e) => {console.log('请求错误回调', e);message.warning('下载文件失败')reject(e);};xhr.send();});
}

二、excel文件：调用后台接口返回文件流，前端下载文件

实现原理：调用后台接口，返回blob, 前端使用file-saver库实现下载。

// 下载excel文件
import { saveAs } from 'file-saver';const downloadTemplate = async () => {try {const params = { ... } // 传参const res = await generateDownStreamReconciliationUsingGET(params);// res为返回结果if (res) {const blob = new Blob([res], { type: 'application/vnd.ms-excel' });FileSaver.saveAs(blob, '对账单.xlsx');console.log('对账单下载成功')}} catch (e) {console.log(e);} finally {console.log('finally')}
};

// 生成对账excel模板表格API
export async function generateDownStreamReconciliationUsingGET(params: API.generateDownStreamReconciliationUsingGETParams,options?: { [key: string]: any },
) {return request<any>(`${process.env.APP_HOST_WAYBILL}/xxx/generateDownStreamReconciliation`,{method: 'GET',responseType: 'blob',  // 必须写该行，否则：后台返回的是string，不是blob且文件下载后，会出现打不开问题。params: {...params,},...(options || {}),},);
}

三、多文件URL下载，前端生成压缩包下载

实现原理：jszip库 + file-saver库

import { getBlobOfUrl } from '@/services/common';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import { message } from 'antd';/*** @method 同时下载多文件,并生成一个压缩包* @param { Object[] } fileInfoList - 文件列表* @param { String } urlField - 文件URL的字段名* @param { String } fileNameField - 文件名的字段名* @param { String } folderName - 压缩包 & 文件夹名称*/
export function downloadAsZip(fileInfoList: any[],folderName = '文件压缩包',urlField = 'filePath',fileNameField = 'name',
) {return new Promise((resolve, reject) => {const zip = new JSZip();// const folder = zip.folder(folderName); // 创建文件夹const promisesList = fileInfoList.map((item) => {return getBlobOfUrl(item[urlField]).then((data) => {// console.log(data); // Blob// folder.file(item[fileNameField], data, { binary: true }); // 往文件夹中存放文件zip.file(item[fileNameField], data, { binary: true }); // 不创建文件夹}).catch((e) => {console.log(e);message.warning(e?.message || '获取文件流失败')});});Promise.all(promisesList).then(() => {zip.generateAsync({ type: 'blob' }).then((content) => {saveAs(content, folderName);resolve('success');}).catch((e) => {message.warning(e?.message || '生成压缩包失败')reject(e);});}).catch((e) => {message.warning(e?.message || '批量获取文件流失败')reject(e);});});
}

import { request } from 'umi';/*** @method 根据文件URL获取blob数据流的API* @param { String } fileUrl - 文件完整路径，如：http://xxx.png*/
export function getBlobOfUrl(fileUrl: string) {return request(fileUrl, {method: 'GET',responseType: 'blob', // 设置后台返回的内容类型为blobparams: {notAuthorization: true,},});
}