使用JSZIP将多个Canvas打包保存为单个zip文件的问题排查

• 命名冲突：自定义的zip生成函数被命名为saveAs，后续写下载逻辑时调用saveAs(content, "test.zip")实际触发的是自定义函数递归，完全没有执行文件保存操作，会直接导致功能无响应甚至栈溢出。
• JSZip配置错误：canvas.toBlob()返回的是二进制Blob对象，并非base64字符串，调用zip.file()时传入{base64: true}会让JSZip按base64规则解析二进制内容，最终压缩包内的图片全部损坏无法打开。
• 导出格式未显式声明：canvas.toBlob()在部分浏览器下默认导出格式不是PNG，会出现文件后缀名和实际内容格式不匹配的问题。
• 下载逻辑缺失：如果没有额外引入FileSaver这类下载工具库，全局不存在接收Blob和文件名的saveAs方法，直接调用会抛出函数未定义的报错。

提前在页面中引入JSZip库即可，不需要额外依赖其他下载库：

// Canvas转Blob，显式指定PNG格式、最高画质
function canvasToBlob(canvas) {
  return new Promise(resolve => {
    canvas.toBlob(res, 'image/png', 1.0);
  });
}

// 批量获取所有canvas的Blob对象
async function getAllCanvasBlobs(canvases) {
  return Promise.all([...canvases].map(canvas => canvasToBlob(canvas)));
}

// 构建包含所有canvas图片的zip包
async function buildCanvasZip() {
  const canvases = document.querySelectorAll("canvas");
  const blobs = await getAllCanvasBlobs(canvases);
  const zip = new JSZip();
  blobs.forEach((blob, index) => {
    // 移除错误的base64配置，直接写入Blob对象
    zip.file(`canvas_${index}.png`, blob);
  });
  return zip;
}

// 原生实现Blob下载，无需第三方库
function downloadFile(blob, fileName) {
  const tempUrl = URL.createObjectURL(blob);
  const trigger = document.createElement('a');
  trigger.href = tempUrl;
  trigger.download = fileName;
  document.body.appendChild(trigger);
  trigger.click();
  document.body.removeChild(trigger);
  URL.revokeObjectURL(tempUrl);
}

// 按钮点击触发的导出逻辑
async function handleExportClick() {
  const zip = await buildCanvasZip();
  const zipBlob = await zip.generateAsync({ type: "blob" });
  downloadFile(zipBlob, "canvas_bundle.zip");
}

const btnGenerate = document.getElementById("form-btn");
btnGenerate.addEventListener('click', handleExportClick);

内容的提问来源于stack exchange，提问作者roadtosleep