zipJS 前端压缩使用

zipJS 前端压缩使用前端在处理文件时 对于大文件或者多个文件上传 下载 编辑 直接使用原文件不方便 最近使用一个可以前端中处理 zip 文件的库 JSzip 主要功能 前端中压缩 解压缩 编辑 zip 文件

大家好,欢迎来到IT知识分享网。

在 nodeJS 中,可以使用 JSZip 压缩本地文件。

这个库的官网:https://stuk.github.io/jszip/

安装

浏览器环境

代码下载链接 http://github.com/Stuk/jszip/zipball/master 下载后直接插入到HTML的 script标签中

NPM 环境

使用 npm 安装依赖(如果没有npm,请先安装 nodeJS)

npm install jszip --save 
// 使用 require 引入 jszip var JSZip = require("jszip"); // 引入另一个 file-saver 库,用来把压缩好的文件保存到本地 var saveAs = require('file-saver'); // 新建一个zip压缩对象实例 var zip = new JSZip(); // 压缩一个文件(文件内容可以上传,使用fs模块,或者直接使用字符串) zip.file("Hello.txt", "Hello World\n"); // 压缩一个文件夹,内部包含一个图片(可以压缩多个文件和文件夹) zip.folder("images").file("smile.gif", imgData, { 
   base64: true}); // 异步生成压缩文件 zip.generateAsync({ 
   type:"blob"}).then(function(content) { 
    // 保存到本地 saveAs(content, "example.zip"); }); 

这样就可以将浏览器中的文本(文件)保存成 example.zip 格式存储到本地了。

代码示范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>Works on firefox, chrome , opera &gt;= 15 and IE &gt;= 10 (but NOT in compatibility view).</p> <button id="zip" class="btn btn-primary">click to zip</button> <button id="unzip" class="btn btn-primary">click to unzip</button> <div id="result_block" class="hidden"> <h3>Content :</h3> <div id="result"></div> <div id="fileContent"></div> </div> </body> <script src="./jquery.js"></script> <script src="./jszip.js" ></script> <script src="./FileSaver.js"></script> <!-- 导入这个插件,可以不用使用下面的 download 函数 --> <script type="text/javascript"> // 创建一个zip 对象,将文件名和内容读到文件中 var zip = new JSZip(); zip.file("readme.md", " hello\nMichael 测试文件"); // 直接把一个文件放在根目录下面 zip.folder("media").file("image1.jpg", " hello\nMichael 测试文件").file("image2.png", " hello\nMichael 测试文件"); // 在根目录下放一个文件夹 media,内部包含两个模拟图片文件 zip.folder("template").file("index.html", "<html><h3>Hello</h3></html>"); // 在根目录下放一个文件夹 template 内部是一个HTML文件。 window.result = ''; // 将文本压缩zip 并下载 $("#zip").on("click", function () { 
      // type: "string" zip.generateAsync({ 
     type:"blob"}).then(function (blob) { 
      // 1) generate the zip file // console.log(blob); window.result = blob; // 绑定到全局组件上,使用另一个按钮下载 // // 2) trigger the download saveAs(blob, "hello.zip"); }, function (err) { 
      $("#blob").text(err); }); }); // 将 zip 文件解压缩成内容读取。 $("#unzip").on("click", function () { 
      JSZip.loadAsync(window.result) // 1) read the Blob .then(function(zip) { 
      console.log(zip); zip.forEach(function (relativePath, zipEntry) { 
      // 2) print entries $("#fileContent").append($("<li>", { 
      text : zipEntry.name })); }); }, function (e) { 
      $('#result').append($("<div>", { 
      "class" : "alert alert-danger", text : "Error reading " + window.result.name + ": " + e.message })); }); }); // 模拟点击,下载文件 // fake_click(save_link); function fake_click(obj) { 
      var ev = document.createEvent("MouseEvents"); ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); obj.dispatchEvent(ev); } // 下载文件 // download("save.txt","hello world"); function download(name, data) { 
      var urlObject = window.URL || window.webkitURL || window; var downloadData = new Blob([data]); var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") save_link.href = urlObject.createObjectURL(downloadData); save_link.download = name; fake_click(save_link); } </script> </html> 

注:浏览器环境下,需要设置合适的第三方库 JS 路径,根据本地实际路径设置。

<script src="./jquery.js"></script> <script src="./jszip.js" ></script> <script src="./FileSaver.js"></script> 

大文件存在的问题

实际使用中,如果压缩文件很大(例如2G)可能出现缓存区错误(感谢 July 冲鸭的反馈),反馈信息,目前官方没有给出明确的解决方案(官方问题),可以使用 zipjs 压缩普通大小的文件(几十MB没问题)。

截止 2024-04 在32位操作系统中,压缩超过 2G 的文件,官方还没有给出明确的处理方法(我退岑,官方可能考虑性能问题,以及压缩比例,2G 文件在服务器或者 node 环境下,压缩消耗性能,其他的 tar gz 7z 等压缩算法,压缩后文件更小,也可以考虑其他替代方案)。

如果必须使用 zipJS 压缩大文件,其他大神提交了 PR,但是库的作者从其他角度考虑没有合并,可以考虑 fork 代码然后改动这个 PR 进行尝试。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/112796.html

(0)
上一篇 2026-01-16 08:00
下一篇 2026-01-16 08:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信