详解如何使用JSZip实现在浏览器中操作文件与文件夹
更新时间：2024年04月19日 08:20:52 作者：当时明月在曾照彩云归
这篇文章主要介绍了如何使用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>到此这篇关于详解如何使用JSZip实现在浏览器中操作文件与文件夹的文章就介绍到这了,更多相关JSZip操作文件与文件夹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序代码上传、审核发布小程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
Bootstrap分页插件之Bootstrap Paginator实例详解
Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了，感兴趣的朋友跟着脚本之家小编一起学习吧2016-10-10
behaviors是用于组件间代码共享的特性, 类似一些编程语言中的'mixin'或者'traits',这篇文章主要介绍了微信小程序中的behaviors,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下2015-04-04
单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色，示例如下,需要的朋友可以参考下2014-06-06
函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)2008-07-07
对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理，有需要的朋友们可以参考借鉴。2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现下拉菜单切换效果，筛选条件功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
Javascript:为input设置readOnly属性(示例讲解)
本篇文章主要是对Javascript中为input设置readOnly属性的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
使javascript也能包含文件...2006-10-10
最新评论