vue 批量打包下载txt文件

思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件

1. 准备工作

安装 3 个依赖: axios, jszip, file-saver

npm install axios

npm install jszip

npm install file-saver

2、下载文件

import axios from 'axios'

export function batchDownFile(url,parameter) {
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'text'
  })
}

 3. 打包文件

import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default {
    methods: {
        handleBatchDownload() {
            const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
            const zip = new JSZip()
            const cache = {}
            const promises = []
            data.forEach(item => {
                const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                    const arr_name = item.split("/")
                    const file_name = arr_name[arr_name.length - 1] // 获取文件名
                    zip.file(file_name, data, { binary: true }) // 逐个添加文件
                    cache[file_name] = data
                })
                promises.push(promise)
            })

            Promise.all(promises).then(() => {
                zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                    FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
                })
            })
        },
    },
}

 参考博客：Vue 中批量下载文件并打包 - M.M.F 小屋