Skip to content
待添加

网页多文件合并下载成zip

一般网页上都是一个文件一个文件的下载。下载代码也比较简单。

javascript
function downloadImage(filename, data) {  
  var link = document.createElement('a');
  link.href = data;
  link.download = filename;
  link.click();
}

但是有的时候又想下载多个文件或者图片,那么这个时候就想跟一些设计网站或者工具网站一样,直接打一个zip包,然后单独下载zip包还挺好的。毕竟浏览器不能直接把多个文件下载到一个文件夹下。

然后找了找发现了 jszip 这个库,还是挺符合需求的。文档地址

用法如下:

javascript
const zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

const folder = zip.folder("images");
folder.file("image.png", imgData, {base64: true});

zip.generateAsync({type:"blob"}).then(function(content) {
    downloadBlob(content, "example.zip");
});

function downloadBlob(blob, filename) {  
  var url = URL.createObjectURL(blob)
  var link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click();
}

这下子就能直接把很多文件打包成一个文件下载了,浏览器下载zip一般还会有自动解压功能,还是非常方便的。