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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
微信小程序后端实现授权登录
Feb 24 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
DOM 高级编程
2015/05/06 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
SQL Server笔试题
2012/01/10 面试题
村干部承诺书
2014/03/28 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
地道战观后感
2015/06/04 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Vue的生命周期一起来看看
2022/02/24 Vue.js