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

【问题标题】：I need a make zip for the multiple files using JSZip on nuxtjs我需要在 nuxtjs 上使用 JSZip 为多个文件制作 zip
【发布时间】：2020-01-15 09:03:41
【问题描述】：

我想在 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")
})
}

【问题讨论】：

标签： vue.js download nuxt.js jszip

【解决方案1】：

手动下载jszip 并将其保存到您在nuxt 中的静态文件夹中。
在脚本部分下的nuxt-config中添加{ src: '/js/jszip.js' },。

【讨论】：

【解决方案2】：

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

应该是这样的：

通过 npm 安装 JSZip：

npm install jszip

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

/* ~/plugins/jszip.js */

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

Vue.use(JSZip)

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

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

您可以尝试这样的代码：

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 / Plugins

希望对你有帮助:)

【讨论】：