用js批量下载图片并压缩到指定文件夹

如果只有一张图片，用js下载他就非常容容易。只需要先将图片加载下来，然后转换成blob进行下载即可。或者干脆什么都不做，只是将图片渲染在浏览器上，然后引导用户右键保存即可。

既然这里是来讲下载文件的，索性将单文件下载也完整的实现一边。

下载一个普通文件

建设我们有一个完整的普通文件，用户点击页面上的下载按钮后可以直接下载，而不用跳转到新的页面，打开一个新的tab再开始。

如果是一个有固定链接的文件，不管她是什么文件，我们只需要将url放到a标签上，并添加download属性值即可。如下

1
<a href="/css/images/banner.jpg" download="banner">下载</a>

然后点击下载按钮，即可直接下载图片，您可以直接将这个链接放入到我的网站上，试一下。需要注意的是，download属性上的值，是下载后文件上的名字，href上的链接，需要符合同源策略，负责也是下载不了，在新的页面。

如果不同同源的文件，或者是一个实时生成的数据文件，我们可以用ajax将内容下载下来，再放链接上下载。

如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const img = new Image()
img.src="/css/images/banner.jpg"
img.onload = () => {
    const canvas = document.createElement('canvas');
    cosnt context = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0)
    canvas.toBlob((blob) => {
        let link = document.createElement('a');
        link.download = 'example.png';

        link.href = URL.createObjectURL(blob);
        link.click();
        // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
        URL.revokeObjectURL(link.href);
    })
}

或者

1
2
3
4
5
6
7
8
const blob = ajaxRes // 建设直接从服务器api那数据
let link = document.createElement('a');
        link.download = 'example.png';

        link.href = URL.createObjectURL(blob);
        link.click();
        // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
        URL.revokeObjectURL(link.href);

到这里，单独下载一个文件的方法就完成了。但是如果有很多文件需要用户下载，让用户一个个的点击下载体验就不太好了。这个时候我们就得考虑批量下载。

首先我们安装并引入需要的js库文件
`
npm install jszip –save

npm install file-saver –save
`

然后引入文件，开始准备下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import JSZip from "jszip";
import { saveAs } from 'file-saver';

async function download(needDownloadList) {
    const zip = new JSZip();
    const downloadData = zip.folder('download') // 创建下载用的文件夹，传入的是文件夹名
    for (let i = 0 ; i < needDownloadList.length; i++) {
        const blob = await ajaxRes // 参考前面的单文件下载
        downloadData.file('filename', blob) //往文件家里面添加文件
    }
    zip.generateAsync({type:"blob"}).then(function(content) {
    // 保存文件
      saveAs(content, "images.zip");
  });
}

通过看上面的代码可以发现，单文件下载和多文件下载都区别只是增加了两个三方库文件，进行了简单的文件增加，只要重点掌握好单文件下载，就能很快搞定多文件一次性下载。