文章源自:http://viralpatel.net/blogs/create-zip-file-javascript/
Create ZIP Files in JavaScript
Zip is a very useful file type if I must say most used. It is the most used file format for data compression and archiving. There are number utilities available to create/generate Zip file. Also most of the programming languages comes up with API supporting to generate Zip files. I have written a couple of articles for zipping/unzipping files in Java and PHP.
While browsing internet, I came up to a very interesting website http://jszip.stuartk.co.uk/. This is JavaScript based API to generate Zip files on the fly! It’s very simple to use. All you need to do is to include the jszip javascript file in your HTML document and call its API.
Let us see how to generate a simple ZIP file in JavaScript.
Hello world ZIP in JavaScript
Let us create a helloworld ZIP file which contains two text files, hello1.txt and hello2.txt.
Step 1. Import jszip JavaScript
Include the jszip javascript file in the HTML document where you want to generate ZIP files. You can download the jszip package and include it in HTML or directly include the jszip javascript through git repository.
<script type="text/javascript" src="https://raw.github.com/Stuk/jszip/master/jszip.js"></script>
Step 2. Generate Hello world ZIP
Following code snippet is HTML file which contains Javascript code to generate ZIP file.
<HTML>
<HEAD>
<script type="text/javascript" src="jszip.js"></script>
</HEAD>
<BODY>
<input type="button" onclick="create_zip()" value="Create Zip"></input>
</BODY>
<SCRIPT>
function create_zip() {
var zip = new JSZip();
zip.add("hello1.txt", "Hello First World\n");
zip.add("hello2.txt", "Hello Second World\n");
content = zip.generate();
location.href="data:application/zip;base64," + content;
}
</SCRIPT>
</HTML>
In above code snippet, we have a button “Create Zip” which calls javascript function create_zip(). This function calls jszip API to generate ZIP file.
Filename Problem
If you have tried above demo in Firefox or Safari, you may have noticed the file that is generated has weird name: e.g. b77AewqA7.zip.part. This is because of existing bugs 367231 and 532230. However jszip comes with a unique workaround of this problem by using Downloadify.
zip = new JSZip();
zip.add("Hello.", "hello.txt");
Downloadify.create('downloadify',{
...
data: function(){
return zip.generate();
},
...
dataType: 'base64'
});
Hope this basic demo will help you get going with Client side ZIP file creation in JavaScript.
相关推荐
"ZipDemo.aspx.htm"可能是一个HTML版本的ASP.NET页面，"Zip.zip"是待解压缩的ZIP文件，而"ZipDemo.aspx_files"通常表示一个包含ASP.NET页面相关资源（如CSS、JavaScript或图片）的目录。在处理这些文件时，你需要...
In this tutorial, we'll cover some of the basics of Unicode-encoded text and Unicode files, and how to view and manipulate it in UltraEdit. Search and delete lines found UEStudio and UltraEdit provide...
Build javascript target (and run the unit tests) (optional) Run the unit tests Run the tool in one of these ways: Run it with node.js (Note Directly call translateToFile_puj7f4$ from JS ...
foreach (HttpPostedFileBase file in HttpContext.Current.Request.Files) { if (file != null && file.ContentLength > 0) { string savePath = Path.Combine(Server.MapPath("~/uploads/"), file.FileName); ...
foreach (var filePath in selectedFiles) { var entry = archive.CreateEntry(Path.GetFileName(filePath)); using (var entryStream = entry.Open()) using (var fileStream = File.OpenRead(filePath)) { ...
7. **资源文件**（Resource Files）：如图片、CSS样式表、JavaScript文件，提供网站的外观和交互性。 8. **文档**（Documentation）：可能包括项目报告、设计文档、使用说明等。 这个项目的核心知识点可能包括： 1...
@GET("api/files/{fileId}") Call<ResponseBody> downloadFile(@Path("fileId") String fileId); ``` 在客户端，你可以监听下载进度并将其保存到本地。 总的来说，"retrofitTest.zip"项目提供了一个综合的Retrofit...
常见的API包括GET /files（获取文件列表）、POST /files（上传文件）、PUT /files/:id（更新文件）、DELETE /files/:id（删除文件）等。 9. **前端界面**：创建一个用户友好的Web界面，用户可以通过这个界面浏览、...
function createZipFile(images) { // 使用jszip库创建ZIP文件 // ... } ``` 综上所述，通过HTML5的`FileReader`、`canvas`以及jQuery，我们可以实现批量图片压缩的效果，不仅方便快捷，而且在某些场景下，压缩...
const addedFile = await ipfsd.api.files.get('added/file/CID'); ``` **总结** `前端开源库-ipfsd-ctl.zip`文件包含的资源是为了帮助前端开发者更好地在Node.js环境中集成和控制IPFS。通过使用`ipfsd-ctl`，...
在本地开发环境中，你可以使用像Create React App这样的脚手架工具快速启动项目。完成后，通过构建命令生成生产环境的文件，并部署到服务器上，让用户能够访问。 总结，"react-dropzone"是React开发中的一个实用...
如果没有设置环境变量，可能需要指定完整路径，如`C:\Program Files\MongoDB\Server\[version]\bin\mongo.exe`。 3. 登录管理员用户：MongoDB提供了一个内置的`admin`数据库，用于管理系统级别的权限。在MongoDB ...
You can create stand alone executable files. paxCompiler engine is thread safe. The roadmap of the compiler includes: JavaScript compiler, Basic compiler and C compiler, cross-language programming, ...
这个实例090-创建和删除文件夹.zip文件包含的源码很可能是用某种编程语言实现的，用于演示如何在程序中进行这些文件系统操作。源码软件通常指的是程序员编写的、可查看和修改的原始代码，与封闭源码的商业软件相反，...
在这个系统中，MySQL用于存储文档信息和用户信息，通过PHP进行CRUD（Create, Read, Update, Delete）操作。 **Web框架与MVC模式** 为了提高代码的可维护性和可扩展性，开发者可能采用了MVC（Model-View-Controller...
这个"基于nestjs与vue3的大文件上传.zip"压缩包提供了一个实现这一功能的示例，结合了后端的NestJS框架和前端的Vue.js 3框架。下面我们将详细探讨这个解决方案中的关键知识点。 ### NestJS 后端处理 **1. 安装依赖...
5. **Prototip 2 - Create beautiful tooltips with ease_files**：这个名字暗示它可能是与前面的 Prototip 2 - Create beautiful tooltips with ease.htm 相关的资源文件，如图片、CSS样式表或JavaScript脚本，这些...
// Create an array with the files and directories to exclude. const excludes = [ 'directory_name' , 'file.extension' ] ; /** * Create a dir-archiver object. * @param { string } directoryPath - The ...
支持文件下载 <br/>You can upload document files, create a link from your HTML content to the document files (zip files, ppt files...). CSS型皮肤 (Demo) <br/>Cute ...