大家好,欢迎来到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 >= 15 and IE >= 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