vue 下载后端接口传送的流文件

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

文章目录

• • 项目需求
  • 核心代码
  • 什么是流文件

项目需求

根据需求，要下载一些点文件，这些数据从后端通过接口的方式，发布流文件，前端通过点击按钮，即可以下载相应的文件到本地。

核心代码

			// 下载轨迹
			trackDownload(){
				let token = localStorage.getItem("token");
				if (this.trackTime.length != 0) {
					let stime = new Date(this.trackTime[0]).Format("yyyy-MM-dd 00:00:00");
					let etime = new Date(this.trackTime[1]).Format("yyyy-MM-dd 00:00:00");
					this.isLoading = true;
					let datainfo = {
						srcAddress: this.srcAddress,
						beginTime: stime,
						endTime: etime
					}

						axios({
								url: this.$api.download+'?key='+token,
								method: "post",
								responseType: "blob",
								// headers: {
								// 	'content-type': 'application/json'
								// },
								data: datainfo
							})
							.then((res) => {
								
								if (res.headers.hasOwnProperty('content-disposition')) {
										let filename = res.headers['content-disposition'].split('=')[1];
										var blob = new Blob([res.data]);
										var downloadElement = document.createElement("a");
										var href = window.URL.createObjectURL(blob); //创建下载的链接
										downloadElement.href = href;
										downloadElement.download = filename; //下载后文件名
										document.body.appendChild(downloadElement);
										downloadElement.click(); //点击下载
										this.$message({
											type: "success",
											message: '导出成功！',
										});
										document.body.removeChild(downloadElement); //下载完成移除元素
										window.URL.revokeObjectURL(href); //释放掉blob对象
										
								}else{
									this.$message({
										type: "error",
										message:'导出失败！'
									})
								}
					
							})

				} else {
					this.$message({
						type: "error",
						message: '请先设定查询的时间段',
					});
				}
			},

上述代码中，主要看axios那一段的引用，post的形式。 此段代码应用于作者的项目中，通用性很强，可以以后使用。

什么是流文件

“流文件”这个术语在不同的上下文中可以有不同的含义，主要可以分为以下几种：

1. 流媒体文件：

   • 流媒体文件是指那些在互联网或局域网上可以实现边下载边播放的多媒体文件。它们被设计成可以在网络上传输时被即时解码和播放，无需等待整个文件下载完毕。流媒体文件格式通常包括但不限于 .flv、.mp4、.wmv、.m3u8 和 RealNetworks 的 .rm 或 .ra。

2. 流式文件（C语言）：

   • 在C语言的文件处理中，流式文件指的是以字符或字节为单位进行读写的文件。与块设备上的文件不同，流式文件不受到特定物理符号（如回车换行符）的限制，它们的读写操作完全由程序控制。例如，当使用 fopen 函数打开一个文件，并指定 "r"（读取模式）、"w"（写入模式）或其他包含 "t"（文本模式）的模式时，C语言会将该文件视为流式文件。

3. NTFS流文件：

   • 在NTFS文件系统中，流文件或交替数据流（Alternate Data Streams, ADS）是一个文件可以拥有的额外数据流，除了主数据流之外。这意味着一个文件可以存储多份数据，每份数据都有自己的名称。例如，一个文本文件可能有一个名为 :Zone.Identifier 的流，用于存储文件的安全区域信息。

4. 流式处理文件：

   • 在数据处理领域，流式文件指的是那些可以被连续地读取和处理的数据源，通常用于大数据处理场景，如 Apache Kafka 或 Spark Streaming 中的数据流。这类文件不需要一次性加载全部数据到内存，而是按需读取并处理数据。

总结来说，“流文件”通常指的是那些数据可以被连续读写，或者能够实现边下载边播放的文件类型。在编程或操作系统层面上，流文件的概念更侧重于数据的连续处理特性。