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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 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
php 分页类 扩展代码
2009/06/11 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP生成树的方法
2015/07/28 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
求职自荐信的格式
2014/04/07 职场文书
学校班班通实施方案
2014/06/11 职场文书
大学生个人总结范文
2015/02/15 职场文书
财务工作个人总结
2015/02/27 职场文书
python基础之停用词过滤详解
2021/04/21 Python