zipJS 前端压缩使用
前端在处理文件时,对于大文件或者多个文件上传、下载、编辑,直接使用原文件不方便,最近使用一个可以前端中处理 zip 文件的库,JSzip,主要功能:前端中压缩、解压缩、编辑zip文件。
在 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 downloadsaveAs(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没问题)。
截止 2022-08 在 32位操作系统中,压缩超过 2G 的文件,官方还没有给出明确的处理方法(我退岑,官方可能考虑性能问题,以及压缩比例,2G 文件在服务器或者 node 环境下,压缩消耗性能,其他的 tar gz 7z 等压缩算法,压缩后文件更小,也可以考虑其他替代方案)。
如果必须使用 zipJS 压缩大文件,其他大神提交了 PR (https://github.com/Stuk/jszip/pull/791)可以考虑 fork 代码然后改动这个 PR 进行尝试。
zipJS 前端压缩使用相关推荐
- vue:前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
- 前端方案(时间/图片/PWA/微信公众号/图片前端压缩/动画与过渡/新兴方案/屏幕适配)
时间 时间戳(毫秒数)不分时区,即UTC时间所累积的毫秒数,UI必须获得时间戳或者UTC时间的字符串才能正确显示浏览器本地时间. 方案1.后台数据库存放本地时间,返回时间戳给UI. 后台数据库存放本地 ...
- 前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例 本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片 参照 ...
- 使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能,那么往往这些图片,都需要进行压缩,且往往是需要经过服务器端压缩的.同时如果说你不懂图片压缩原理的话,你还得去花钱使用他人的API进行图片压缩(例如tin ...
- 易企秀前端压缩源码分析与还原
你是否想知道易企秀炫酷的H5是如何实现的,原理是什么,本文会为你揭秘并还原压缩过的源代码. 易企秀是一款h5页面制作工具,因方便易用成为业界标杆.后续一个项目会用到类似易企秀这样的自定义H5的功能,因 ...
- 前端压缩、解压缩之gzip+pako.js
ws推送或这接口返回的数据经过gzip压缩能减少大量的传输数据,减少传输数据消耗 但是需要在收到数据之后解压. 前端解压就可以用到pako了 下载与引入pako 下载:npm install pako ...
- 前端压缩图片 tinypng
前端写页面,很多时候会引入大量的图片,网页打开的时候加载速度就会成为一个问题, 尤其是在目前的移动端(未来网速大幅提升的情况下会好很多),现在这样的情况下压缩图片 是很好的选择,可以加快网页打开的速度 ...
- js图片前端压缩多图上传(旋转其实已经好了只是手机端有问题要先压缩再旋转)...
var filechooser = document.getElementById("choose");// 用于压缩图片的canvasvar canvas = document. ...
- 前端压缩图片,前端压缩图片后转换为base64.
今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...
最新文章
- iphone11边框喇手问题_苹果全系 iPhone 11 频频翻车,问题频频呈现,你的新机占几点...
- 笔录软件在linux系统,Linux下查看已安装软件
- linux停止nodejs,node.js – 在linux重启后,nodejs消失了
- Zookeeper_实际应用讲解
- HH SaaS电商系统的销售订单毛利润模块设计
- Java实现将日志信息存到TXT中
- 在机器学习中为什么只需要正的误差而不用负的误差
- Neural Motifs: Scene Graph Parsing with Global Contex
- Ubuntu安装Oracle手册(简单版)
- 309.最佳买卖股票时机含冷冻期
- 方正国际用CMMI的思想管理博客
- EasyRecovery14免费版文件数据恢复还原软件
- 怎么创建css样式表,为HTML5表单创建CSS样式
- 中国航空公司特点机型
- Android仿微信朋友圈图片查看器
- 夏季哪些蔬菜不适合生吃凉拌,食用会发生危险
- Thinking in BigData(二)大数据时代下的变革
- 【Lesson 10】中古调式
- 搜索引擎优化(SEO)----关键字
- ModuleNotFoundError: No module named ‘official‘