Question

我正在我的当前项目中使用Vue.js，并且我需要一个功能，该功能将帮助任何用户下载画廊中可用的图片。

有一个选项，用户可以通过单击每个图像旁边的复选框来选择多个图像，并且要下载，用户需要单击一个按钮来下载用户可能已选择的所有图片。该下载会将所有选定的图像压缩到一个zip文件夹中，然后下载星号，用户将获得所有选定图像的最终zip文件夹。

为提供此功能，我尝试了许多Vue.js库，但只有JSZip可以工作一段时间。 JSZip将图像打包到.zip中，然后下载zip文件夹，但是正在打包的图像中也存在type:"image/?"，但是当打开文件查看图像时，它会给出一个错误：

not an image of the defined type

在图像查看器中。这是我使用的代码示例：

export default {
  methods: {
    download_btn() {
      var zip = new JSZip()
      var img = zip.folder("images")
      for (i = 0; i < this.image.length; i++) {
        img.file("img.png", this.image[i].imageurl)
      }
      zip.generateAsync({
        type: "blob"
      }).then(function(content) {
        saveAs(content, "img_archive.zip")
      })
    }
  }
}

此代码仅将一张图片保存在zip文件夹中，并且您无法打开图像文件。

Answer 1

根据https://stuk.github.io/jszip/documentation/api_jszip/file_data.html，file方法期望将图像数据作为调用的第二个参数。看起来您正在传递图像的url而不是实际的图像字节。如果您参考这些文档，将会看到他们通过ajax调用来检索图像。

Answer 2

要保存多个图像，请尝试使用文件名中的数字。就像Deadron所说的那样，您将不得不使用图像数据，而不是URL。

在文档中，他们在promise中使用xhr，请参见https://stuk.github.io/jszip/documentation/examples/downloader.html

代替：

for (i = 0; i < this.image.length; i++) {
    img.file("img.png", this.image[i].imageurl)
}

尝试：

for (i = 0; i < this.image.length; i++) {
    img.file("img" + i + ".png", /* image data */)
}

Answer 3

看看这个。也许会有帮助。

https://jsfiddle.net/jaitsujin/zrdgsjht/

您可以通过修改此行来管理zip文件夹结构

filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");

如何在Vue.js中使用JSZip在.zip文件夹中下载多个图像文件

3 个答案: