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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
动态加载js的方法汇总
Feb 13 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
详解Vue之事件处理
Jul 10 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
杏林同学录(七)
2006/10/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python图片验证码生成代码
2016/07/02 Python
python多线程并发实例及其优化
2019/06/27 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
网游商务专员求职信
2013/10/15 职场文书
保研推荐信
2014/05/09 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
优秀党员个人总结
2015/02/14 职场文书
葬礼主持词
2015/07/02 职场文书
体育委员竞选稿
2015/11/21 职场文书
四年级数学教学反思
2016/02/16 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏