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. MYSQL 是如何保证binlog 和redo log同时提交的？

    MYSQL 一个事务在提交的时候能够保证binlog和redo log是同时提交的,并且能在宕机恢复后保持binlog 和redo log的一致性. 先来看看什么是redo log 和binlog,以 ...

  2. spring mvc 给action添加事务不成功的原因

    spring springMVC ation事务管理 自己单独做了个小网站 但是发现action事务不起作用了 但是如果用service层就没问题 找了很多办法没解决 最后自己解决了 其实就是一个加载 ...

  3. 01_Mac安装Homebrew

    目录 1 官方 1.1 前提 1.2 安装 2 其他安装方法 2.1 安装homebrew-core 2.2 安装homebrew-cask 3 源 3.1 查看源 3.2 设置源 3.3 设置bot ...

  4. AntSK 0.2.1 版本揭秘：动态加载dll，驱动Function Call新境界！

    在.NET的无限宇宙中,动态加载dll似乎一直是操控代码生生不息的魔杖.今天,我将与您探讨如何通过AntSK 0.2.1 版本灵活运用dll,将Function Call的强大功能插拔自如地融入项目之 ...

  5. 忘记Mysql密码怎么办

    1.打开常用的Mysql管理工具 2.这里只是用Navicat举个例子 3.打开mysql数据库 修改密码为123456 update user set authentication_string=p ...

  6. elasticsearch使用painless的一些简单例子

    目录 1.背景 2.准备数据 2.1 mapping 2.2 插入数据 3.例子 3.1 (update)更新文档 id=1 的文档,将 age 加 2岁 3.2 (update_by_query)如 ...

  7. Vue中点击按钮回到顶部（滚动效果）

    页面滚动到一定位置时,出现回到顶部按钮 代码如下HTML <div class="footer"> <div class="gotop" v- ...

  8. 【OpenCV】OpenCV (C++) 与 OpenCvSharp (C#) 之间数据通信

      OpenCV是一个基于Apache2.0许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和Mac OS操作系统上. 它轻量级而且高效--由一 ...

  9. ZYNQ7000系列学习之自定义模块构成IP

    ZYNQ的自定义IP 1.实验原理 在vivado中可以将自己写的verilog模块封装成IP核,并入bd设计,有效地提高了PS到PL的设计内联能力.同时,这部分的学习可以将verilog的基础知识转 ...

  10. 鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）

    一.Grid/GridItem 1.概述 网格布局是一种新型的布局方式,它按照网格来划分页面,通过列和行来定义网格,使得页面的布局更加灵活.简洁.易于维护.网格布局能够将页面分成多个单元格,可以在这些 ...