多个下载链接到一个zip文件，然后再下载javascript

Multiple download links to one zip file before download javascript

本文关键字：下载 文件 然后 javascript zip 链接 一个      更新时间：2023-09-26

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

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

当所有文件请求完成时，可以使用JSZip.js、XMLHttpRequest()、Array.prototype.map()、Promise.all()创建.zip文件；在JSZip .generateAsync()功能中使用<a>元素，download属性设置为.zip文件的objectURL，点击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>

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

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

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

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

这两个文件是.wav文件和.json文件。它们中的每一个都应该被区别对待，因此您应该使用{base64:true,binary:true}作为.wav文件，使用{binary:true}作为json文件，作为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);
})
相关文章：