StreamSaver实现大文件下载解决方案

最新推荐文章于 2025-11-24 06:14:20 发布

原创

最新推荐文章于 2025-11-24 06:14:20 发布 · 1.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #node.js

StreamSaver实现大文件下载解决方案

web端

安装 StreamSaver.js

npm install streamsaver
# 或
yarn add streamsaver

在 Vue 组件中导入

import streamSaver from "streamsaver"; // 确保导入名称正确

完整代码修正

<!--
  * @projectName: 
  * @desc: 
  * @author: duanfanchao
  * @date: 2024/06/20 10:00:00
-->
<template>
	<div class="async-table">
		<button @click="downloadLargeFile">下载大文件（带进度）</button>
		<div v-if="progress > 0">下载进度: {
   
   {
   
    progress }}%</div>
	</div>
</template>

<script>
import streamSaver from "streamsaver";

export default {
   
   
	name: "AsyncTable",
	components: {
   
   },
	data() {
   
   
		return {
   
   
			progress: 0,
		};
	},
	methods: {
   
   
		async downloadLargeFile() {
   
   
			try {
   
   
				const fileUrl = "../系统架构师资料.zip"; // 替换为你的大文件URL
				const fileName = "largeFile.zip"; // 下载后的文件名

				// 使用 fetch 获取文件流
				const response = await fetch(fileUrl);
				if (!response.ok) throw new Error("下载失败");

				const contentLength = +response.headers.get("content-length");
				let downloadedBytes = 0;

				const fileStream = streamSaver.createWriteStream(fileName);
				const reader = response.body.getReader();
				const writer = fileStream.getWriter();

				const updateProgress = (chunk) => {
   
   
					downloadedBytes += chunk.length;
					this.progress = Math.round(
						(downloadedBytes / contentLength) * 100
					);
                    console.log('updateProgress', this.progress);
				};

				const pump = async () => {
   
   
					const {
   
    done, value } = await reader.read();
					if (done) {
   
   
						await writer.close();
						return;
					}
					updateProgress(value);
					await writer.write(value);
					return pump();
				};
				await pump();

				console.log("下载完成！");
			} catch (error) {
   
   
				console.error("下载出错:", error);
			}
		},
	},
	mounted() {
   
   },
};
</script>

<style lang="less" scoped>
.async-table {
   
   
    height: 100%;
	width: 100%;
}
</style>