Question

我正在尝试使用jsZip创建一个zip文件。 zip文件的内容是来自网络的图像。我创建了以下代码。但是当我运行它时，我得到的是一个22kb的空zip文件。

<html>
<head>
</head>
<body>    
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jszip-utils.min.js"></script>   
<script>
var imgLinks=["url1", "url2", "url3"];    
function create_zip()
{
var zip=new JSZip();
for(var i=0; i<imgLinks.length; i++)
{ 
JSZipUtils.getBinaryContent(imgLinks[i], function (err, data) {
    if(err) {
      alert("Problem happened when download img: " + imgLink[i]);
      console.erro("Problem happened when download img: " + imgLink[i]);
      deferred.resolve(zip); // ignore this error: just logging
      // deferred.reject(zip); // or we may fail the download
    } else {
      zip.file("picture"+i+".jpg", data, {binary:true});
      deferred.resolve(zip);
    }
 });          
    }     
var content = zip.generate({type:"blob"});
saveAs(content, "downloadImages.zip");    
}    
</script>    
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
<input id="button" type="button" onclick="create_zip()" value="Create Zip"></input>
</center>    
</body>    
</html>

（url1，url2和url3替换为我想下载的图片网址。）

为什么我会收到这些空的zip文件？

Answer 1

JSZipUtils.getBinaryContent是异步的：在调用zip.generate()之后，内容将被添加。在生成zip文件之前，您应该等待所有图像。

编辑：

如果要加载的文件位于其他服务器上，则此服务器需要发送其他HTTP标头，例如Access-Control-Allow-Origin: server-hosting-the-page.com。在这种情况下，Firefox或Chrome调试控制台将显示错误。 js库无法检测到CORS问题（请参阅here），并会在空内容的情况下触发成功。

使用jsZip将图像从url添加到zip文件

1 个答案: