Question

是否可以在javascript中将多个下载URL发送到一个zip文件中，并且可以下载该zip文件。所以，在我的网页上，有一个按钮，点击时下载压缩到zip中的下载网址中的所有文件的zip文件？

我相信我需要使用jszip或类似的工具。这有可能，有什么建议从哪里开始？

Answer 1

当所有文件请求完成后，您可以使用JSZip.js，XMLHttpRequest()，Array.prototype.map()，Promise.all()创建.zip文件;在<a> download函数中使用objectURL元素.zip属性设置为JSZip .generateAsync()文件的a元素，点击Save File元素应该显示.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>为可下载文件。

<html>
 <head>
  <title></title>
  <script src="background.js"></script>
 </head>
 <body>
 </body>
 <script src="https://apis.google.com/js/client.js"></script>
</html>

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

Answer 2

我最近不得不解决同样的问题，并使用JSZipUtils找到了解决方案。

可在此处找到解决方案http://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview

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

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

代码也可以在这里找到

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);

})

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

2 个答案: