我如何使用 Axios 获取一组文件以提供给 Pizzip 以生成 .zip 存档？

Question

对于那些不熟悉的人，这里是 Pizzip 的文档：https://github.com/open-xml-templating/pizzip/tree/master/documentation

此外，我正在使用 VueJS (2)、ES6、TS

我正在尝试使用 Axios 下载单个文件，然后使用 Pizzip 将它们放入一个 zip 文件中。

async getFile(mat: Material): Promise<any> {
    try {
      const file = await axios.get(mat.url, { responseType: 'arraybuffer' })
      return file.data
    } catch (error) {
      console.log(error)
      return {}
    }
}

这给了我正确的 ArrayBuffer。然后我有以下内容：

async getZip() {
    let zip = new pizzip()
    this.materials.forEach(async mat => {
        const record = await PortalService.getFile(mat)
        console.log(record) // logs the ArrayBuffer
        zip.file(mat.name, record)
    })
    let files = zip.generate({ type: 'blob' })
    return saveAs(files, `${this.request.id}-files.zip`)
}

Pizzip 文档说 zip.file() 的 data 参数可以是 ArrayBuffer 类型，但当我下载 zip 时它只是一个空存档。我试过为 zip.file() 使用可选的 options 参数，但没有任何效果。提前谢谢你。

Answer 1

问题可能与异步 for 循环有关。 forEach 方法不支持异步循环功能；它只会执行每个迭代而不等待前一个完成。所以基本上您是在向其中添加任何文件之前生成 zip 文件。

您可以通过两种方式处理此问题：

同时触发所有请求并等待它们全部完成。这会更快，因为它同时发送请求，但要注意不要一次发送数百个请求！

await Promise.all(this.materials.map(async mat => {
  const record = await PortalService.getFile(mat)
  zip.file(mat.name, record)
}))

按顺序触发每个请求，一次一个。速度较慢，但不会发送垃圾邮件请求。

for (const mat of this.materials) {
  const record = await PortalService.getFile(mat)
  zip.file(mat.name, record)
}

我如何使用 Axios 获取一组文件以提供给 Pizzip 以生成 .zip 存档？

How can I use Axios to get an array of files to give to Pizzip to generate a .zip archive?

blob

arraybuffer

vue.js

axios

pizzip