网页多文件合并下载成zip

网页多文件合并下载成zip

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

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

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

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

用法如下：

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一般还会有自动解压功能，还是非常方便的。