微信小程序 + JSZIP 将多个文件链接生成 ZIP文件保存到本地

前言

最近公司有一个需求，要求能够批量下载打包发票，想了一下还是得通过小程序的文件系统来处理

实现细节

js 复制代码

// 引入 jszip 文件
const JSZip = require('../../lib/jszip.min');
// 使用 小程序的文件 系统
const fs = wx.getFileSystemManager();

// 首先要拿到一个文件url地址列表
const fileUrls = ["链接1", "链接2"];
const zip = new JSZip();
const downloadTasks = fileUrls.map(async (url, index) => {
  try {
    const res = await new Promise((resolve, reject) => {
    // 因为我的文件url是pdf类型，所以content-type 设置为 application/octet-stream 为二进制流文件
      wx.downloadFile({
        url: url,
        header: {
          "Content-Type": "application/octet-stream"
        },
        success: resolve,
        fail: reject
      });
    });
    // 获取文件后缀名
    const ext = url.split('.').pop();
    const fileName = `file_${index + 1}.${ext}`;
    // 读取文件内容并添加到zip 这里使用readFileSync 一定要加上 binary 不然会有问题
    const fileContent = fs.readFileSync(res.tempFilePath, "binary", 0);
    zip.file(fileName, fileContent, { binary: true });
  } catch (error) {
    console.error(`下载文件失败: ${url}`, error);
  }
});
await Promise.all(downloadTasks);
// 生成ZIP文件
const content = await zip.generateAsync({ type: 'arraybuffer' });
// 保存到本地
const zipPath = `${wx.env.USER_DATA_PATH}/files.zip`;
// wx.env.USER_DATA_PATH 无脑用就行了
fs.writeFile({
  filePath: zipPath,
  data: content,
  encoding: 'binary',
  success: () => {
    console.log('ZIP文件保存成功:', zipPath);
    wx.openDocument({
      filePath: zipPath,
      fileType: 'other', // 根据文件类型设置，如 'pdf', 'jpg' 等
      success: () => console.log('打开文件成功'),
      fail: (err) => console.error('打开失败', err)
    });
    // 可以在这里调用wx.saveFileToDisk让用户保存到手机
  },
  fail: (err) => {
    console.error('保存ZIP文件失败:', err);
  }
});

尾声

感谢你看到最后，最后再说两点~

①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。

②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

微信小程序 + JSZIP 将多个文件链接 生成 ZIP文件 保存到本地

前言

实现细节

尾声

微信小程序 + JSZIP 将多个文件链接生成 ZIP文件保存到本地