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


Posted in Javascript onNovember 20, 2017

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

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 (<a on-click={ () => this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载</a>)
 },
 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保存文件
  })
  })
 },
 },
}

注意:

如果下载的文件过大, 打包的时间将会很长, 甚至可能会导致浏览器奔溃

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 #Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 #Javascript
详解vue+css3做交互特效的方法
Nov 20 #Javascript
解读ES6中class关键字
Nov 20 #Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 #Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 #Javascript
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python中协程用法代码详解
2018/02/10 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
学习python可以干什么
2019/02/26 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python中如何使用虚拟环境
2020/10/14 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
怎样写演讲稿
2014/01/04 职场文书
安全施工责任书
2014/08/25 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
与死神共舞观后感
2015/06/15 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Mybatis是这样防止sql注入的
2021/12/06 Java/Android