使用JSZip实现压缩文件与图片

简介: 使用JSZip实现压缩文件与图片

JSZip简介

JSZip是一个用于创建、读取和编辑.zip文件的javascript库,有一个可爱而简单的API。JSZip支持Nodejs和浏览器端的安装使用。具体方法如下:

npm install jszipnp
m install file-saver

浏览器端解压zip文件

       后端Nodejs将zip文件以二进制形式存储到数据库中。当前端需要该zip文件时,后端将zip文件以二进制形式传输到前端,前端再解压还原。

使用JSZip压缩文件

import JSZip from 'jszip';
import FileSaver from 'file-saver';
var zip = new JSZip();
//创建hello.txt文件,文件内容为Hello World
zip.file("hello.txt", "Hello World\n");
//创建一个nested文件夹,文件里里创建一个hello.txt文件,文件内容为Hello World
zip.folder("nested").file("hello.txt", "Hello World\n");
zip.generateAsync({type:"blob"}).then(function(content) {
// 使用file-saver保存下载zip文件
FileSaver.saveAs(content, `压缩包名.zip`);
});

通过.remove(name)删除文件或文件夹:

    zip.remove("photos"); //通过删除文件夹,也删除其内容。

    浏览器端解压Zip文件

    import JSZip from 'jszip'
    let new_zip = new JSZip();
    new_zip.loadAsync(content).then(function(zip) {
    new_zip.file("hello.txt").async("string");
    });

    案例:导出一个zip文件,包含图片文件和.json文件

    /**
      *  @param dataList ['base64数据','base64数据']
      */
    function exportJSZipFileSaverEvent (dataList: any) {
    var zip = new JSZip();
    var img = zip.folder("images");
    let myNotesName = 'zip名称';
    for (let i = 0; i < dataList.length; i++) {
      //过滤base64格式
      let image = dataList[i].replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
      let imageNames = `${myNotesName}${getTime()}(${i + 1}).png`;
      img?.file(imageNames, image, {base64: true});
      // 导出json
      let jsonNames = `${myNotesName}${getTime()}(${i + 1}).json`;
      zip.file(jsonNames, 'json文本数据');
    }
    // 下载
    zip.generateAsync({type: "blob"}).then(function (content) {
        FileSaver.saveAs(content, `${myNotesName}${getTime()}.zip`);
    });
    }
    function getTime () {
         let data = new Date();
         return data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate();
    }

    JSZip API地址:

    https://stuk.github.io/jszip/

    https://heltschl.org/_js/jszip/

    相关文章
    |
    前端开发 算法 API
    直接在前端做 zip 压缩/解压
    前段时间研究前端是如何解析 excel 表格的时候了解到 jszip 这个库,可以直接在前端对 zip 包进行压缩和解压缩,今天稍微水一篇。
    subject may not be empty | type may not be empty
    subject may not be empty | type may not be empty
    467 0
    |
    2月前
    |
    资源调度
    Vue3 + Vite 构建组件库发布到 npm
    这篇文章介绍了如何使用Vue3和Vite构建组件库并发布到npm,包括初始化项目、配置项目结构、创建组件目录、设置入口文件以及导出组件等步骤。
    413 0
    Vue3 + Vite 构建组件库发布到 npm
    Cesium系列:加载单个模型
    Cesium如何加载单个三维模型数据
    918 0
    |
    2月前
    |
    安全 Linux 网络安全
    Linux系统初步设置本地Git环境和生成SSH密钥的步骤。
    现在您的Linux系统已经配置好了Git环境,并创建并添加了SSH密钥,可以安全地与远端仓库进行交互,无论是克隆、推送还是拉取操作。此过程确保了数据传输的安全并使版本控制流程更为顺畅。使用Git时应考虑定期更新并管理您的凭据,以确保安全性。
    328 0
    |
    8月前
    |
    Linux
    linux syscall和int 80的区别
    通过以上内容,希望您能更清晰地理解 `int 0x80` 和 `syscall` 的区别及其在不同系统架构中的应用。
    471 99
    |
    11月前
    |
    缓存 监控 数据挖掘
    C# 一分钟浅谈:性能测试与压力测试
    【10月更文挑战第20天】本文介绍了性能测试和压力测试的基础概念、目的、方法及常见问题与解决策略。性能测试关注系统在正常条件下的响应时间和资源利用率,而压力测试则在超出正常条件的情况下测试系统的极限和潜在瓶颈。文章通过具体的C#代码示例,详细探讨了忽视预热阶段、不合理测试数据和缺乏详细监控等常见问题及其解决方案,并提供了如何避免这些问题的建议。
    247 7
    |
    移动开发 资源调度 JavaScript
    Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
    这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
    8211 1
    Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
    |
    监控 Java Unix
    |
    JavaScript Windows
    electron程序运行在某些 windows 上白屏
    electron程序运行在某些 windows 上白屏