Vue 中批量下载文件并打包的示例代码

要实现Vue中批量下载文件并打包，可以使用webpack和file-saver库。

1. 安装file-saver库

首先需要安装file-saver库，可以使用npm进行安装，命令如下：

npm install file-saver --save

1. 创建download.js

创建一个download.js文件，包含一个方法downloadSingle(url, filename)，用于下载单个文件；以及一个方法downloadMulti(urlList, zipName)，用于批量下载并打包文件。

import JSZip from 'jszip'
import FileSaver from 'file-saver'

export default {
  downloadSingle(url, filename) {
    fetch(url)
      .then(response => response.blob())
      .then(file => FileSaver.saveAs(file, filename))
  },
  downloadMulti(urlList, zipName) {
    const zip = new JSZip()
    const folderName = 'downloadFiles'
    urlList.forEach((url, index) => {
      const promise = fetch(url)
        .then(response => response.blob())
        .then(file => {
          const fileName = url.split('/').pop()
          zip.folder(folderName).file(fileName, file)
        })
      zip.file(index + '.txt', `downloading file ${index + 1}(${fileName}) ...`)
      Promise.all([promise]).then(() => {
        if (index === urlList.length - 1) {
          zip.generateAsync({ type: 'blob' }).then(content => {
            FileSaver.saveAs(content, zipName)
          })
        }
      })
    })
  }
}

1. 在组件中使用download.js

在需要使用下载功能的组件中，引入download.js文件，并在methods中绑定相关方法。

<template>
  <div>
    <button @click="downloadSingle">Download Single File</button>
    <button @click="downloadMulti">Download Multiple Files</button>
  </div>
</template>
<script>
import download from './download'

export default {
  methods: {
    downloadSingle() {
      download.downloadSingle('https://www.example.com/image.jpg', 'image.jpg')
    },
    downloadMulti() {
      const urlList = [
        'https://www.example.com/image1.jpg',
        'https://www.example.com/image2.jpg',
        'https://www.example.com/image3.jpg'
      ]
      download.downloadMulti(urlList, 'download.zip')
    }
  }
}
</script>

以上示例代码中，我们使用了JSZip库创建了一个zip文件，并将下载的文件依次添加到zip文件中，并在下载完毕后统一打包下载。另外我们使用了FileSaver库来实现文件的下载。同时我们也提供了下载单个文件的方法供用户使用。

另外一个示例，我们可以通过fetch获取文件流并使用标签的download属性来实现下载单个文件，示例代码如下：

downloadFile() {
  fetch('https://www.example.com/image.jpg').then(response => {
    response.blob().then(blob => {
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = 'image.jpg'
      link.click()
      URL.revokeObjectURL(link.href)
    })
  })
}

以上示例代码中，我们通过fetch获取文件流，并使用URL.createObjectURL(blob)将文件流转换成可下载的链接，创建一个标签，设置download属性，并点击该标签来进行下载。