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

默认最简单的下载方式是：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,},});
}

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

前端下载文件的几种方式
前端下载文件的几种方式前言 1. window.open 2. window.location.href 3. a标签 4. iframe 5. blob 前言总结下载文件的几种方式,文件都是通过 ...
java 文件下载详解_Java 从网上下载文件的几种方式实例代码详解
废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.github.pandafang.tool; import java.io.BufferedOutputStream; i ...
python 下载文件-Python下载文件的11种方式
原标题:Python下载文件的11种方式在本教程中,你将学习如何使用不同的Python模块从web下载文件.此外,你将下载常规文件.web页面.Amazon S3和其他资源. 最后,你将学习如何克服 ...
用python下载文件的若干种方法汇总
压缩文件可以直接放到下载器里面下载的 you-get 连接下载任意文件重点用python下载文件的若干种方法汇总写文章用python下载文件的若干种方法汇总 zhangqibot发表于Met ...
python实现http下载文件-Python HTTP下载文件并显示下载进度条功能的实现
下面的Python脚本中利用request下载文件并写入到文件系统,利用progressbar模块显示下载进度条. 其中利用request模块下载文件可以直接下载,不需要使用open方法,例如: im ...
成功解决百度网盘下载文件时遇到下载总进度一直处于99.9%，显示一直下载不下来的问题
成功解决百度网盘下载文件时遇到下载总进度一直处于99.9%,显示一直下载不下来的问题目录解决问题解决思路解决方法解决问题百度网盘下载文件时遇到下载总进度一直处于99.9%,显示一直下载 ...
Vue 通过url下载文件并对下载的文件更名
Vue 通过url下载文件并对下载的文件更名 HTML如下: <div @click="downloadFile(url,name)">点击下载</div> ...
python如何实现下载文件_python实现下载文件的三种方法
python实现下载文件的三种方法 Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件. ...
python 常用文件读取和保存方式汇总
python 常用文件读取和保存方式汇总 txt文件 open和close函数文件对象的方法读写示例理解rwa中的指针 w a r txt文件 open和close函数 fileObject = ...

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

一、根据文件URL下载

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

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

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

最新文章

热门文章