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)

使用JSZip实现在浏览器中操作文件与文件夹的更多相关文章

  1. websocketj--随时随地在Web浏览器中操作你的服务端程序

    0 - 有没有觉得Linux标准终端界面输入输出枯燥无味? 1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出? 2 - 尝试过用浏览器操作Windows中的cmd吗? ...

  2. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...

  3. Elastic：Sense chrome - 在 chrome 浏览器中操作 Elasticsearch 的插件

    文章转载自:https://elasticstack.blog.csdn.net/article/details/114533904 Sense 是我们现在所说的 Kibana 控制台 UI 的第一个 ...

  4. Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

    在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...

  5. 在网页浏览器中原生显示PDF文件

    在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...

  6. 在浏览器中从FTP下载文件

    public static class FTPHelper { /// <summary> /// 得到特定FTP目录的文件列表 /// </summary> /// < ...

  7. 在sublime text3下,用快捷键把文件打开到浏览器中

    使用背景 在编辑html或者js文件的时候,是否想在浏览器中预览一下, 你的步骤可能是这样的: 找到编辑文件的位置, 右键使用某一浏览器打开.如果是这样,你就out了, 因为在sublime中有更加简 ...

  8. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  10. 《SeleniumBasic 3.141.0.0 - 在VBA中操作浏览器》系列文章之一：SeleniumBasic的下载

    Selenium是一种非常流行的浏览器和网页自动化技术,开发人员可以使用C#.Java.Python等语言来操作Chrome.Firefox等浏览器. VBA语言可以直接操作访问Microsoft I ...

随机推荐

  1. linux 三剑客命令

    Linux 命令集合 目录 Linux 命令集合 基础概念 1 软连接和硬链接 1.1 基础概念 1.2 如何创建软链接 零.正则 01 区别 02 通配符 03 基础正则 04 扩展正则 一 awk ...

  2. 2023中山市第三届香山杯网络安全大赛初赛wp

    序 被带飞了 PWN move 先往变量 sskd 写入 0x20 字节,往第二个输入点输入 0x12345678 即可进入到第三个输入点,存在 0x8 字节的溢出.思路是在第一个输入点布置 rop ...

  3. CSharp的lambda表达式匿名类扩展方法

    c#的lamba表达式 之前已经写过一些关于委托还有事件的文章,今天就来介绍一下lambda表达式. 首先定义需要的函数以及委托 { public delegate void DoNothingDel ...

  4. 各种O总结及阿里代码规范总结

    首先梳理下POJO POJO包括 DO/DTO/BO/VO(所有的POJO类属性必须使用包装数据类型.) 定义 DO/DTO/VO 等 POJO 类时,不要设定任何属性默认值. controller使 ...

  5. ubuntu 14.04 x86_64编译安装Skyeye1.3.5RC1的心得

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文发布于 2014-11-09 09:19:03 ...

  6. kali 2018.2镜像安装

    本文链接来源 Kali Linux 前身是著名渗透测试系统BackTrack ,是一个基于 Debian 的 Linux 发行版,包含很多安全和取证方面的相关工具.此次通过VMware虚拟机安装201 ...

  7. Navicat 连接MySQL 8.0.11 出现2059错误 解决

    原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password 解决 mysql -uroot -pp ...

  8. oracle job 带参数

    declare job number; begin sys.dbms_job.submit(job => job, what => 'DECLARE S1 VARCHAR2(4000); ...

  9. java使用ftp连接linux处理文件

    1.Maven依赖 <!-- FTP使用包 --> <dependency> <groupId>commons-net</groupId> <ar ...

  10. KingbaseES V8R3 集群运维系列 -- failover切换后集群自动恢复

    ​ 案例说明: KingbaseES V8R3集群默认在触发failover切换后,为保证数据安全,原主库需要通过人工介入后,恢复为新的备库加入到集群.在无人值守的现场环境,需要在触发failover ...