使用Vue如何批量下载文件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的金溪网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
1. 准备工作
安装 3 个依赖: axios, jszip, file-saver
yarn add axios yarn add jszip yarn add file-saver
2. 下载文件
import axios from 'axios'
const getFile = url => {
return new Promise((resolve, reject) => {
axios({
method:'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}这里需要注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer
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保存文件
})
})
},
},
}4. 最终代码
import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
const getFile = url => {
return new Promise((resolve, reject) => {
axios({
method:'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}
export default {
render(h) {
return ( this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载)
},
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如何批量下载文件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！