vue使用jszip导出文件夹图片

以下是使用JSZip在Vue中导出文件夹图片的示例代码：

<template>
  <div>
    <button @click="exportImages">Export Images</button>
  </div>
</template>

<script>
import JSZip from 'jszip'
import axios from 'axios'

export default {
  name: 'ExportImages',
  methods: {
    exportImages() {
      // Create a new JSZip instance
      const zip = new JSZip()

      // Define the folder name for the exported images
      const folderName = 'my-images'

      // Define the image URLs to be exported
      const imageUrls = [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]

      // Loop through each image URL
      imageUrls.forEach((url, index) => {
        // Get the image filename from the URL
        const filename = url.substring(url.lastIndexOf('/') + 1)

        // Make a GET request to the image URL
        axios.get(url, { responseType: 'blob' }).then((response) => {
          // Convert the blob response to a file object
          const file = new File([response.data], filename)

          // Add the file to the JSZip instance with the folder name
          zip.folder(folderName).file(filename, file)

          // Check if all images have been added to the zip file
          if (index === imageUrls.length - 1) {
            // Generate the zip file and download it
            zip.generateAsync({ type: 'blob' }).then((content) => {
              const link = document.createElement('a')
              link.href = URL.createObjectURL(content)
              link.download = `${folderName}.zip`
              link.click()
            })
          }
        })
      })
    }
  }
}
</script>

在此示例中，我们使用axios库来获取每个图像的Blob响应。然后，我们将每个文件添加到JSZip实例中，并使用文件夹名称将其包含在内。最后，我们使用generateAsync方法生成Zip文件，并通过创建一个临时链接来下载它。