下载javascript之前多个下载链接到一个zip文件

是否有可能,在JavaScript中,有多个下载url发送到一个zip文件,该zip文件可以下载。 所以,在我的网页上,还有一个button,点击时会下载压缩到zip的所有文件的压缩文件。

我相信我需要使用jszip或类似的工具。 这是完全可能的,有什么build议从哪里开始?

当所有文件请求完成时,可以使用JSZip.jsXMLHttpRequest()Array.prototype.map()Promise.all()创build.zip文件。 在JSZip .generateAsync()函数中使用download属性设置为.zip文件的JSZip <a>元素,单击a元素应该显示“ Save File对话框,并创build.zip作为可下载文件。

 <head> <script src="jszip.js"></script> <script> window.onload = function() { var zip = new JSZip(); var a = document.querySelector("a"); var urls = ["a.html", "b.html"]; function request(url) { return new Promise(function(resolve) { var httpRequest = new XMLHttpRequest(); httpRequest.open("GET", url); httpRequest.onload = function() { zip.file(url, this.responseText); resolve() } httpRequest.send() }) } Promise.all(urls.map(function(url) { return request(url) })) .then(function() { console.log(zip); zip.generateAsync({ type: "blob" }) .then(function(content) { a.download = "folder" + new Date().getTime(); a.href = URL.createObjectURL(content); a.innerHTML = "download " + a.download; }); }) } </script> </head> <body> <a href="" download>download</a> </body> 

plnkr http://plnkr.co/edit/baPtkILg927DtJfh4b5Y?p=preview

我最近不得不解决同样的问题,并find了使用JSZipUtils的解决scheme。

解决scheme可以在这里findhttp://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview

我有两个文件,我想压缩并通过用户浏览器下载,我调用函数getBinaryContent(path, callback)在这两个文件。 这里的path是文件的存储位置。

这两个文件是一个.wav文件和一个.json文件。 他们每个人都应该被区别对待,因此您应该对.wav文件使用{base64:true,binary:true} {binary:true} ,将json文件使用{binary:true}作为JSZip函数文件的参数 。

代码也可以在这里find

 var file_confirmation=[false,false]; var file_name=["test1.wav","test.json"]; var urlList =["test.wav","test.json"]; var filenameSave ="myZip"; function zipFiles(id,urls) { zip = new JSZip(); JSZipUtils.getBinaryContent(urls[0],function (err, data) { if(!err) { var dic={base64:true,binary:true}; //WAV File Encoding zip.file(file_name[0], data, dic); file_confirmation[0]=true; downloadZipIfAllReady(id); } }); JSZipUtils.getBinaryContent(urls[1],function (err, data) { if(!err) { var dic={binary:true}; //JSON File Encoding zip.file(file_name[1], data, dic); file_confirmation[1]=true; downloadZipIfAllReady(id); } }); } function downloadZipIfAllReady(id) { if(file_confirmation.every(function(element, index, array) {return element;})) { zip.generateAsync({type:"blob"}) .then(function(content) { var a = document.querySelector("#"+id); a.download = filenameSave; a.href = URL.createObjectURL(content); a.click(); }); } } $(document).ready(function() { zipFiles("a_id",urlList); })