关于文件下载功能的前端实现
在Web开发中,前端下载文件是一个常见的需求。根据文件来源和下载方式的不同,前端下载文件可以采用多种方案。下面将介绍几种常见的前端下载文件方案。
1、通过 window.open()
打开新页面下载文件
window.open(`url`, "_self");
使用场景:下载 excel 文件,后端提供接口,接口返回的是文件流,可以直接使用 window.open()
,最简单的方式。
- 优点:最简洁;
- 弊端:当参数错误时,或其它原因导致接口请求失败,这时无法监听到接口返回的错误信息,需要保证请求必须是正确的且能正确返回数据流,不然打开页面会直接输出接口返回的错误信息,体验不好。
2、通过 a
标签打开新页面下载文件
export const exportFile = (url, fileName) => {
const link = document.createElement("a");
const body = document.querySelector("body");
link.href = url;
link.download = fileName;
// fix Firefox
link.style.display = "none";
body.appendChild(link);
link.click();
body.removeChild(link);
};
通过 a 标签下载的方式,同 window.open()是一样的,唯一的优点是可以自定义下载后的文件名,a 标签里有 download 属性可以自定义文件名。
弊端:同 window.open()
方式一样,无法监听错误信息。
问题:以上两种方式,当在下载.mp3 格式,或者视频文件时,浏览器会直接播放该文件,而达不到直接下载的功能,此时,当下载音视频文件时无法使用以上两种方式。
3、通过文件流的方式下载
为了解决.mp3 文件下载所带来的问题,通过 ajax 请求返回 Blob 对象,或者 ArrayBuffer 对象。
获取文件
如下:通过原生 ajax 请求返回 Blob 对象
const getBlob = (url) => {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
};
同样,也可以通过 axios 返回 ArrayBuffer 对象来处理
import axios from "axios";
const getFile = (url) => {
return new Promise((resolve, reject) => {
axios({
method: "get",
url,
responseType: "arraybuffer",
})
.then((data) => {
resolve(data.data);
})
.catch((error) => {
reject(error.toString());
});
});
};
ArrayBuffer(又称类型化数组)
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。 Blob(Binary Large Object): 二进制大数据对象
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 注意:
如果下载文件是文本类型的(如: .txt, .js 之类的), 那么用 responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用 arraybuffer 或 blob,更多详情请查看 MDN 通过 ajax 请求的方式下载文件,可以解决第 1、2 中存在的弊端,当请求错误时或捕获到错误信息
保存文件
当获取到文件后,这时需要保存文件
const saveAs = (blob, filename) => {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement("a");
const body = document.querySelector("body");
link.href = window.URL.createObjectURL(blob); // 创建对象url
link.download = filename;
// fix Firefox
link.style.display = "none";
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href); // 通过调用 URL.createObjectURL() 创建的 URL 对象
}
};
为了解决 IE(ie10 - 11)和 Edge 无法打开 Blob URL 链接的方法,微软自己有一套方法 window.navigator.msSaveOrOpenBlob(blob, filename)
,打开并保存文件,以上代码做了简单的兼容,navigator.msSaveBlob(blob, filename)
是直接保存。注意,此为非标准功能,详情请查看相关文档。
以下为完整代码(原生版)
const getBlob = ({ method = "GET", url }) => {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
};
const saveAs = (blob, filename) => {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement("a");
const body = document.querySelector("body");
link.href = window.URL.createObjectURL(blob); // 创建对象url
link.download = filename;
// fix Firefox
link.style.display = "none";
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href); // 通过调用 URL.createObjectURL() 创建的 URL 对象
}
};
export const download = (url, filename = "") => {
getBlob({ url }).then((blob) => {
saveAs(blob, filename);
});
};
用后台的 filename 的话,可以从 header 的 content-disposition 中去获取。
4、如何实现批量下载,且打包文件
在第 3 点的基础上,如果要实现批量下载,那能做到的只是连续多次调用 download 方法,这样无法批量集中的下载文件。这个时候就需要能够对已获取到的文件流,进行一个打包的操作,然后一次下载完毕。
这时,需要用到两个库 jszip 和 file-saver
完整的思路:通过 ajax 获取文件,然后用 jszip 压缩文件, 再用 file-saver 生成文件
-
获取文件 同上(第 3 点)
-
打包文件
export const download = () => {
const urls = ["url", "url"]; //需要下载的路径
const zip = new JSZip();
const cache = {};
const promises = [];
urls.forEach((item) => {
const promise = getBlob(item).then((data) => {
// 下载文件, 并存成ArrayBuffer对象
zip.file("下载文件名", data, { binary: true }); // 逐个添加文件
cache[item.fileName] = data;
});
promises.push(promise);
});
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, `打包下载.zip`); // 利用file-saver保存文件
});
});
};
完整代码
/**
* 获取文件
* @param url
* @returns {Promise<any>}
*/
const getBlob = (url) => {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
};
/**
* 批量打包zip包下载
* @param urlArr Array [{url: 下载文件的路径, fileName: 下载文件名称}]
* @param filename zip文件名
*/
export const download = (urlArr, filename = "打包下载") => {
if (!urlArr.length > 0) return;
const zip = new JSZip();
const cache = {};
const promises = [];
urlArr.forEach((item) => {
const promise = getBlob(item.url).then((data) => {
// 下载文件, 并存成ArrayBuffer对象
zip.file(item.fileName, data, { binary: true }); // 逐个添加文件
cache[item.fileName] = data;
});
promises.push(promise);
});
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, `${filename}.zip`); // 利用file-saver保存文件
});
});
};
注意:由于通过浏览器进行打包压缩,如果文件过大,或者下载的内容过多,可能导致浏览器崩溃。
总结
综上所述,前端下载文件的方案多种多样,开发者应根据具体需求和场景选择合适的方案。对于简单的静态文件下载,可以直接使用<a>
标签;对于动态生成的文件或需要通过Ajax请求获取的文件,可以使用JavaScript或第三方库来实现下载功能。无论选择哪种方案,都应注意文件的安全性、兼容性和性能问题,以确保良好的用户体验。
本文由mdnice多平台发布
推荐阅读
-
Java 后端向前端返回文件流--实现下载功能
-
35 岁实现财务*,腾讯程序员手握2300万提前退休?-1000万房产、1000万腾讯股票、加上300万的现金,一共2300万的财产。有网友算了一笔账,假设1000万的房产用于自住,剩下1300万资产按照平均税后20-50万不等进行计算,大约花上26-60年左右的时间才能赚到这笔钱。也就是说,普通人可能奋斗一辈子,才能赚到这笔钱。在很多人还在为中年危机而惶惶不可终日的时候,有的人的35岁,就已经安全着陆,试问哪个打工人不羡慕?但问题是有这样财富积累必然有像样的实力做靠山。没有人可以不劳而获。 看到这里,肯定有人说,那么对于普通人来说,卷可能真就成了唯一的出路。但是卷也有轻松的卷,“偷懒”的卷法,对于程序员而言,刨除掉一时无法改掉的开会传统占用的大部分时间,如何把有限的时间和精力放在真正重要的架构设计、需求设计上,而不是重复的造*,编码、改bug、手动测试。因此在科技改变生活的今天,学会使用AI工具成为程序员们的必备技能。 以全栈式全自动的软件开发工具飞算SoFlu软件机器人为例,作为全球首款面向微服务架构设计和最佳实践的软件机器人,SoFlu软件机器人改变了原来手工编码的作业模式,通过可视化拖拽方式以及参数配置就能实现等同于编写复杂代码的业务逻辑,在设计业务逻辑时就完成了微服务应用开发,做到“业务即图,图即代码”,实现“软件开发,十倍提效”。 而作为飞算SoFlu软件机器人的一个重要组成部分,FuncGPT(慧函数)支持所有类型函数创建。通过自然语言描述Java函数需求,实时生成高质量、高可读性的Java函数代码。生成代码可直接复制到IDEA,或一键导入Java全自动开发工具函数库。 FuncGPT(慧函数)具有五大核心能力: ● 自然语言:通过自然语言即可生成函数,降低软件开发门槛。 ● 秒级函数开发:全自动秒级开发函数,秒级完成,效率千倍提升。 ● 一站式函数开发应用:函数生成即可直接应用,效率、安全有保障。 ● 质量可靠:生成的函数代码符合业界规范、具备良好的可读性,符合最优解。 ● 灵活生成:可以根据开发人员的具体需求生成并支持调整和修改。 以“将文件流转换为File对象”这个需求为例,以下是FuncGPT(慧函数)秒级生成的代码: / 类名:FileConverter // 函数名:convertStreamToFile // 函数功能:将文件流转换为File对象 // POM依赖包:无 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class FileConverter { /** * 将文件流转换为File对象 * @param inputStream 文件流 * @param filePath 文件路径 * @param fileName 文件名 * @return 转换后的File对象 * @throws IOException 如果发生I/O异常 */ public static File convertStreamToFile(InputStream inputStream, String filePath, String fileName) throws IOException { File file = new File(filePath + File.separator + fileName); // 创建File对象 try (FileOutputStream outputStream = new FileOutputStream(file)) { // 创建文件输出流 byte buffer = new byte[1024]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { // 从文件流读取数据并写入文件 outputStream.write(buffer, 0, bytesRead); } } return file; // 返回转换后的File对象 } } // 函数示例 // 将文件流转换为File对象示例 // 入参:inputStream,文件流 // 入参:filePath,文件路径 // 入参:fileName,文件名 // 出参:file,转换后的File对象 // 调用示例: // InputStream inputStream = new FileInputStream("example.txt"); // String filePath = "C:\\Users\\User\\Documents"; // String fileName = "example.txt"; // File file = FileConverter.convertStreamToFile(inputStream, filePath, fileName); // System.out.println(file.getAbsolutePath); // 输出结果:例如,将文件流转换为File对象后,文件的绝对路径为:C:\Users\User\Documents\example.txt // 则输出结果为:C:\Users\User\Documents\example.txt 通过分析,不难发现以上代码:
-
连接 SFTP 上传和下载文件的 java 实现
-
JSch - SFTP 的 Java 实现(文件上传和下载)
-
通过 SpringMVC 系列(IV)的 SpringMVC 实现文件上传和下载
-
Java 继承了 Minio 以实现文件上传、文件下载、文件删除等功能。
-
PHP 扩展类 ZipArchive 用于实现 Zip 文件的压缩和解压缩以及文件打包下载
-
关于文件下载功能的前端实现
-
一种结构设计模式,允许在对象中动态添加新行为。它通过创建一个封装器来实现这一目的,即把对象放入一个装饰器类中,然后把这个装饰器类放入另一个装饰器类中,以此类推,形成一个封装器链。这样,我们就可以在不改变原始对象的情况下动态添加新行为或修改原始行为。 在 Java 中,实现装饰器设计模式的步骤如下: 定义一个接口或抽象类作为被装饰对象的基类。 公共接口 Component { void operation; } } 在本例中,我们定义了一个名为 Component 的接口,该接口包含一个名为 operation 的抽象方法,该方法定义了被装饰对象的基本行为。 定义一个实现基类方法的具体装饰对象。 公共类 ConcreteComponent 实现 Component { public class ConcreteComponent implements Component { @Override public void operation { System.out.println("ConcreteComponent is doing something...") ; } } 定义一个抽象装饰器类,该类继承于基类,并将装饰对象作为一个属性。 公共抽象类装饰器实现组件 { protected Component 组件 public Decorator(Component component) { this.component = component; } } @Override public void operation { component.operation; } } } 在这个示例中,我们定义了一个名为 Decorator 的抽象类,它继承了 Component 接口,并将被装饰对象作为一个属性。在操作方法中,我们调用了被装饰对象上的同名方法。 定义一个具体的装饰器类,继承自抽象装饰器类并实现增强逻辑。 公共类 ConcreteDecoratorA extends Decorator { public ConcreteDecoratorA(Component 组件) { super(component); } } public void operation { super.operation System.out.println("ConcreteDecoratorA 正在添加新行为......") ; } } 在本例中,我们定义了一个名为 ConcreteDecoratorA 的具体装饰器类,它继承自装饰器抽象类,并实现了操作方法的增强逻辑。在操作方法中,我们首先调用被装饰对象上的同名方法,然后添加新行为。 使用装饰器增强被装饰对象。 公共类 Main { public static void main(String args) { Component 组件 = new ConcreteComponent; component = new ConcreteDecoratorA(component); 组件操作 } } 在这个示例中,我们首先创建了一个被装饰对象 ConcreteComponent,然后通过 ConcreteDecoratorA 类创建了一个装饰器,并将被装饰对象作为参数传递。最后,调用装饰器的操作方法,实现对被装饰对象的增强。 使用场景 在 Java 中,装饰器模式被广泛使用,尤其是在 I/O 中。Java 中的 I/O 库使用装饰器模式实现了不同数据流之间的转换和增强。 让我们打开文件 a.txt,从中读取数据。InputStream 是一个抽象类,FileInputStream 是专门用于读取文件流的子类。BufferedInputStream 是一个支持缓存的数据读取类,可以提高数据读取的效率,具体代码如下: @Test public void testIO throws Exception { InputStream inputStream = new FileInputStream("C:/bbb/a.txt"); // 实现包装 inputStream = new BufferedInputStream(inputStream); byte bytes = new byte[1024]; int len; while((len = inputStream.read(bytes)) != -1){ System.out.println(new String(bytes, 0, len)); } } } } 其中 BufferedInputStream 对读取数据进行了增强。 这样看来,装饰器设计模式和代理模式似乎有点相似,接下来让我们讨论一下它们之间的区别。 第三,与代理模式的区别: 代理模式的目的是控制对对象的访问,它在对象外部提供一个代理对象来控制对原对象的访问。代理对象和原始对象通常实现相同的接口或继承相同的类,以确保两者可以相互替换。 装饰器模式的目的是动态增强对象的功能,而这是通过对象内部的包装器来实现的。在装饰器模式中,装饰器类和被装饰对象通常实现相同的接口或继承自相同的类,以确保两者可以相互替代。装饰器模式也被称为封装器模式。 在代理模式中,代理类附加了与原类无关的功能。
-
关于使用后端实现动态表单功能的见解