使用JSZip实现在浏览器中操作文件与文件夹

1. 引言

浏览器中如何创建文件夹、写入文件呢？

答曰：可以借助JSZip这个库来实现在浏览器内存中创建文件与文件夹，最后只需下载这个.zip文件，就是最终得结果

类似的使用场景如下：

在线下载很多图片，希望这些图片能分类保存到各个文件夹并最终下载成一个zip文件
在线下载很多文档，希望这些文档能分类保存到各个文件夹并最终下载成一个zip文件

本质上都是希望浏览器能创建文件夹和创建文件，最终保存成一个文件来提供下载

JSZip的GitHub站点：Stuk/jszip: Create, read and edit .zip files with Javascript (github.com)

一个可用的中文站点：JSZip参考手册 (asprain.cn)

下面主要记录一下基础使用，详细的API请参考上述文档

2. 使用

2.1 安装

使用NPM：

 npm install jszip

使用在线CDN：

 <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.js"></script>

为了可以代码可以快速复现，笔者这里使用CDN的方式引入

2.2 创建zip实例

一个JSZip实例是读写.zip文件的基础

 const zip = new JSZip();

2.3 读取zip文件

读取官方的示例文件text.zip

 const zip = new JSZip();
 
fetch("https://stuk.github.io/jszip/test/ref/text.zip")       // 1) fetch the url
    .then(function (response) {                       // 2) filter on 200 OK
        if (response.status === 200 || response.status === 0) {
            return Promise.resolve(response.blob());
        } else {
            return Promise.reject(new Error(response.statusText));
        }
    })
    .then(data => zip.loadAsync(data))                            // 3) 加载数据
    .then(function (zip) {
        zip.forEach(function (relativePath, file) {  	// 4) 遍历压缩包内的文件
           console.log(`path: ${relativePath}, file: ${file.name}`)
           // 输出：path: Hello.txt, file: Hello.txt
        });
})

因为Hello.txt是个文本文件，可以直接使用string的方式读取内部的数据

 const zip = new JSZip();
 
fetch("https://stuk.github.io/jszip/test/ref/text.zip")       // 1) fetch the url
    .then(function (response) {                       // 2) filter on 200 OK
        if (response.status === 200 || response.status === 0) {
            return Promise.resolve(response.blob());
        } else {
            return Promise.reject(new Error(response.statusText));
        }
    })
    .then(data => zip.loadAsync(data))                            // 3) chain with the zip promise
    .then(function (zip) {
        return zip.file("Hello.txt").async("string"); // 4) 读取Hello.txt文件
    })
    .then(function success(text) {
        console.log(text); // 输出：Hello World
    }, function error(e) {
        console.error(e);
    });

2.4 创建zip文件

写入文件与数据

 zip.file("file.txt", "content");
new Promise((resolve, reject) => {
    resolve(zip.file("file.txt").async("string"))
}).then(data => {
    console.log(data); // 输出：content
})

写入指定文件夹下的指定文件

 zip.file("text/file.txt", "content");
zip.forEach(function (relativePath, file) {
    console.log(`path: ${relativePath}, file: ${file.name}`)
    // 输出：path: text/file.txt, file: text/file.txt
});

最后的目录结构可以参考下图

2.5 下载zip文件

这里将上面的file.txt下载为zip，使用a链接的方式

 zip.generateAsync({ type: "blob" }).then(function (content) {
    document.body.appendChild(document.createElement("a"));
    document.querySelector("a").href = URL.createObjectURL(content);
    document.querySelector("a").download = "test.zip";
    document.querySelector("a").click();
});

完整的代码如下：

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.js"></script>
</head>
 
<body>
 
    <script>
        const zip = new JSZip();
 
        // fetch("https://stuk.github.io/jszip/test/ref/text.zip")       // 1) fetch the url
        //     .then(function (response) {                       // 2) filter on 200 OK
        //         if (response.status === 200 || response.status === 0) {
        //             return Promise.resolve(response.blob());
        //         } else {
        //             return Promise.reject(new Error(response.statusText));
        //         }
        //     })
        //     .then(data => zip.loadAsync(data))                            // 3) chain with the zip promise
        //     .then(function (zip) {
        //         return zip.file("Hello.txt").async("string"); // 4) chain with the text content
        //     })
        //     .then(function success(text) {
        //         console.log(text);
        //     }, function error(e) {
        //         console.error(e);
        //     });
        zip.file("text/file.txt", "content");
        zip.forEach(function (relativePath, file) { 
           console.log(`path: ${relativePath}, file: ${file.name}`)
        });
 
        zip.generateAsync({ type: "blob" }).then(function (content) {
            document.body.appendChild(document.createElement("a"));
            document.querySelector("a").href = URL.createObjectURL(content);
            document.querySelector("a").download = "test.zip";
            document.querySelector("a").click();
        });
    </script>
 
</body>
 
</html>

3. 参考资料

[1] How to use JSZip (stuk.github.io)

[2] JSZip参考手册 (asprain.cn)

posted @ 2024-04-19 01:10 当时明月在曾照彩云归阅读(841) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 浏览器端的大文件下载

· webpack的快速使用

· jszip基本使用及应用实例

· JS实现 ZIP 压缩包的导入解析

· JavaScript 文件处理

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：当时明月在曾照彩云归
园龄： 3年9个月
粉丝： 63
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

当时明月在曾照彩云归

个人的日常随笔

使用JSZip实现在浏览器中操作文件与文件夹

1. 引言

2. 使用

2.1 安装

2.2 创建zip实例

2.3 读取zip文件

2.4 创建zip文件

2.5 下载zip文件

3. 参考资料

公告

搜索

常用链接

积分与排名

阅读排行榜

推荐排行榜

	const zip = new JSZip();

	fetch("https://stuk.github.io/jszip/test/ref/text.zip") // 1) fetch the url
	.then(function (response) { // 2) filter on 200 OK
	if (response.status === 200 \|\| response.status === 0) {
	return Promise.resolve(response.blob());
	} else {
	return Promise.reject(new Error(response.statusText));
	}
	})
	.then(data => zip.loadAsync(data)) // 3) 加载数据
	.then(function (zip) {
	zip.forEach(function (relativePath, file) { // 4) 遍历压缩包内的文件
	console.log(`path: ${relativePath}, file: ${file.name}`)
	// 输出：path: Hello.txt, file: Hello.txt
	});
	})

	zip.file("file.txt", "content");
	new Promise((resolve, reject) => {
	resolve(zip.file("file.txt").async("string"))
	}).then(data => {
	console.log(data); // 输出：content
	})

	zip.file("text/file.txt", "content");
	zip.forEach(function (relativePath, file) {
	console.log(`path: ${relativePath}, file: ${file.name}`)
	// 输出：path: text/file.txt, file: text/file.txt
	});

	zip.generateAsync({ type: "blob" }).then(function (content) {
	document.body.appendChild(document.createElement("a"));
	document.querySelector("a").href = URL.createObjectURL(content);
	document.querySelector("a").download = "test.zip";
	document.querySelector("a").click();
	});

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.js"></script>
	</head>

	<body>

	<script>
	const zip = new JSZip();

	// fetch("https://stuk.github.io/jszip/test/ref/text.zip") // 1) fetch the url
	// .then(function (response) { // 2) filter on 200 OK
	// if (response.status === 200 \|\| response.status === 0) {
	// return Promise.resolve(response.blob());
	// } else {
	// return Promise.reject(new Error(response.statusText));
	// }
	// })
	// .then(data => zip.loadAsync(data)) // 3) chain with the zip promise
	// .then(function (zip) {
	// return zip.file("Hello.txt").async("string"); // 4) chain with the text content
	// })
	// .then(function success(text) {
	// console.log(text);
	// }, function error(e) {
	// console.error(e);
	// });
	zip.file("text/file.txt", "content");
	zip.forEach(function (relativePath, file) {
	console.log(`path: ${relativePath}, file: ${file.name}`)
	});

	zip.generateAsync({ type: "blob" }).then(function (content) {
	document.body.appendChild(document.createElement("a"));
	document.querySelector("a").href = URL.createObjectURL(content);
	document.querySelector("a").download = "test.zip";
	document.querySelector("a").click();
	});
	</script>

	</body>

	</html>

当时明月在曾照彩云归

个人的日常随笔

使用JSZip实现在浏览器中操作文件与文件夹 目录导航使用JSZip实现在浏览器中操作文件与文件夹1. 引言2. 使用2.1 安装2.2 创建zip实例2.3 读取zip文件2.4 创建zip文件2.5 下载zip文件3. 参考资料发布于 2024-04-19 01:10

1. 引言

2. 使用

2.1 安装

2.2 创建zip实例

2.3 读取zip文件

2.4 创建zip文件

2.5 下载zip文件

3. 参考资料

公告

搜索

常用链接

积分与排名

阅读排行榜

推荐排行榜

使用JSZip实现在浏览器中操作文件与文件夹