Web前端最全前端批量导出图片并打包压缩_前端多个图片合并成压缩包，蚂蚁金服内推四面

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

const zip = new JSZip();
const img = zip.folder("images");//文件夹的名字
for (let i = end; i >= start; i--) {
  const res = await getArrayBuffer(`${BaseURL}${i}.png`);
  img.file(`${i}.png`, res, { base64: true });//文件夹下文件的名字
}
zip.generateAsync({ type: "blob" }).then(function (content) {
  FileSaver.saveAs(content, "example.zip");//压缩包的名字
});

}

第三步：

<Button onClick={() => download(0, 9)}>0-9

知识点1:`FileSaver`的使用方法

import FileSaver from “file-saver”;

function sayHello() {
var blob = new Blob([“Hello, world!”], {
type: “text/plain;charset=utf-8”
});
FileSaver.saveAs(blob, “hello world.txt”);//把blob格式的内容导出到本地磁盘
}

知识点2:JSZip的使用—>github`https://github.com/Stuk/jszip#readme`

const zip = new JSZip();

zip.file(“Hello.txt”, “Hello World\n”);//创建一个文件，文件名：Hello.txt；文件内容：Hello World

const img = zip.folder(“images”);//创建一个文件夹，文件夹的名字：images
img.file(“smile.gif”, imgData, {base64: true});//在文件夹中创建一个文件，文件名：smile.gif;文件内容：base64格式的图片

//生成blob格式的内容，然后用saveAs把blob格式的内容导出到本地磁盘
zip.generateAsync({type:“blob”}).then(function(content) {
// see FileSaver.js
saveAs(content, “example.zip”);
});

结果：
/*
Results in a zip containing—>导出一个包含一下内容的压缩包
Hello.txt ------------------>压缩包里包含一个Hello.txt文件
images/----------------------->压缩包里包含一个images文件夹
smile.gif----------------->images文件夹下有一个smile.gif的图片
*/

### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)