使用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)
使用JSZip实现在浏览器中操作文件与文件夹的更多相关文章
- websocketj--随时随地在Web浏览器中操作你的服务端程序
0 - 有没有觉得Linux标准终端界面输入输出枯燥无味? 1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出? 2 - 尝试过用浏览器操作Windows中的cmd吗? ...
- vue-router 在微信浏览器中操作history URl未改变的解决方案
在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...
- Elastic：Sense chrome - 在 chrome 浏览器中操作 Elasticsearch 的插件
文章转载自:https://elasticstack.blog.csdn.net/article/details/114533904 Sense 是我们现在所说的 Kibana 控制台 UI 的第一个 ...
- Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常
在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...
- 在网页浏览器中原生显示PDF文件
在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...
- 在浏览器中从FTP下载文件
public static class FTPHelper { /// <summary> /// 得到特定FTP目录的文件列表 /// </summary> /// < ...
- 在sublime text3下,用快捷键把文件打开到浏览器中
使用背景 在编辑html或者js文件的时候,是否想在浏览器中预览一下, 你的步骤可能是这样的: 找到编辑文件的位置, 右键使用某一浏览器打开.如果是这样,你就out了, 因为在sublime中有更加简 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
系列目录 [已更新最新开发文章,点击查看详细] 在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...
- 《SeleniumBasic 3.141.0.0 - 在VBA中操作浏览器》系列文章之一：SeleniumBasic的下载
Selenium是一种非常流行的浏览器和网页自动化技术,开发人员可以使用C#.Java.Python等语言来操作Chrome.Firefox等浏览器. VBA语言可以直接操作访问Microsoft I ...
随机推荐
- vue 动态加载css，改变网站皮肤模式
Vue.mixin({ created () { require('view-design/dist/styles/iview.css') } }) 参考资料:https://blog.csdn.ne ...
- 简单实用算法——位图算法（BitMap）
目录 算法原理 优点和缺点 算法实现(C#) 算法应用 参考文章 算法原理 BitMap的基本思想就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据 ...
- CSS(相对定位relative、绝对定位absolute、固定定位fixed、定位应用、元素的显示和隐藏）
一. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果? 场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. ...
- MySQL varchar详解
说明:以下结果都是在mysql8.2及Innodb环境下测试. varcahr(255)是什么含义? varchar(255) 表示可以存储最大255个字符,至于占多少个字节由字符集决定. varch ...
- 记录--为什么推荐用svg而不用icon?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 使用背景: 1.因为svg图标在任何设备下都可以高清显示,不会模糊.而icon会在显卡比较低的电脑上有显示模糊的情况 2.svg图标在页面 ...
- 记录--有关CSS盒模型之内边距、边框、外边距的十九问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本篇文章主要探讨盒模型,以及内边距.边框.外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章 ...
- verilog之不常用语句
verilog之不常用语句 前言 verilog是硬件描述语言,其主要特点是针对硬件逻辑的描述:在FPGA上实现时,常用的语句往往和硬件有直接的关联.比如assign,原理图上的连线,如果不省略,应该 ...
- quartus之LPM_COMPARE测试
quartus之LPM_COMPARE测试 1.IP描述 比较器的IP,可以比较两路数据是否相等.相等输出为1,不等输出为0的aeb信号是需要测试的量. 2.基础测试 module compare_t ...
- NetAdapt：MobileNetV3用到的自动化网络简化方法 | ECCV 2018
NetAdapt的思想巧妙且有效,将优化目标分为多个小目标,并且将实际指标引入到优化过程中,能够自动化产生一系列平台相关的简化网络,不仅搜索速度快,而且得到简化网络在准确率和时延上都于较好的表现 ...
- YOLACT++ : 实时实例分割，从29.8mAP/33.5fps到34.1mAP/33.5fps
YOLACT是首个实时实例分割算法,但是准确率较SOTA差得有点多,YOLACT++从主干网络.分支和anchor的3个角度出发对YOLACT进行优化,在保持实时性的前提下提升了5map,论文改进的角 ...