我需要在 nuxtjs 上使用 JSZip 为多个文件制作 zip

Question

我想在 nuxtjs 上使用 JSZip 为多个文件制作 zip，并且我希望将文件转换为 Base64 格式为 pdf，文件格式也可以是任意。如果所有文件都是 jpg，那么它会转换为 jpeg，如果所有文件都是pdf 然后它转换 pdf 列表并放入 zip 文件夹中。

我想用 JSZip 包做这个 vuejs 或 nuxtjs 。

我使用下面的代码但没有得到任何东西。

    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")
})
}

Answer 1

我不了解 JSZip，但是对于 Nuxtjs，你可以创建一个插件来调用它。

应该是这样的：

1. 通过 npm 安装 JSZip：

npm install jszip

2. 创建文件plugins/jszip.js。在plugins/jszip.js里面添加：

/* ~/plugins/jszip.js */

import Vue from 'vue'
import JSZip from 'jszip'

Vue.use(JSZip)

3. 在 nuxt.config.js 上添加对插件的引用。我猜测它应该在访问者的浏览器上运行，因此您应该包含“模式：客户端”。这将使其绕过服务器端渲染。

export default {
 ...
  plugins: [
      { src: '~/plugins/jszip', mode: 'client' }
    ]
 ...
  }

4. 您可以尝试这样的代码：

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

您可以在这里阅读更多内容：NuxtJS / 插件

希望有帮助:)

Answer 2

手动下载jszip并将其复制到nuxt中的静态文件夹中。
在 nuxt-config 的脚本部分添加

{ src: '/js/jszip.js' },

。

Answer 3

我无法让它工作！我都试过了