Vue 中批量下载文件并打包的示例代码 file-saver + jszip

最新推荐文章于 2024-05-04 22:36:24 发布

weixin_42634991

最新推荐文章于 2024-05-04 22:36:24 发布

阅读量606

点赞数

分类专栏： vue html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42634991/article/details/133985118

版权

vue 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

1、首先先下载所需要的插件【含对应版本】

 yarn add file-saver@2.0.5 jszip@3.6.0

2、在需要的页面引入相关内容

import { saveAs } from 'file-saver';
import JSZip from 'jszip';

3、将url地址转为 blob类型文件。此处使用发送请求的方式。用于后续文件下载。保存使用

getImgUrlToArrayBuffer(url) {
	url = (url.startsWith('http') || url.startsWith('//')) ? url : window.location.origin) + url;
	return new Promise((resolve, reject) => {
		let xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.responseType = 'blob';
		xhr.onload = function() {
			let result = {
				'code': 0,
				'message': '',
				'data': ''
			};
			if (this.status === 200) {
				result.data = this.response;
				resolve(result);
			} else {
				result.code = 1;
				result.data = null;
				result.message = '读取文件失败！';
				reject(result);
			}
		};
		xhr.send();
	});
}

4、编写代码内容，异步支持多文件下载，提高相关效率

function saveAsZip() {
	// 遍历添加下载逻辑
	let zip = new JSZip();
	let downloadUrlRequestList = [];
	for (let item of selectRows) {  // 图片数组
	    downloadUrlRequestList.push(
	        this.getImgUrlToArrayBuffer(
	             item.url, item.fileName
	        .then(res => {
	            if (res.code === 0) {
                    // 添加文件内容到zip中
	                zip.file(item.fileName, res.data, { binary: true });
	            }
	        })
	     );
	 }
	if (downloadUrlRequestList.length) {
		Promise.all(downloadUrlRequestList).then(_ => {
			// 生成二进制
			zip.generateAsync({ type: 'blob' }).then(res => {
				// 通过file 保存图片
				saveAs(res, new Date().getTime() + '.zip');
			}).catch(() => {
				this.$message.erro('图片打包失败，请重新下载！');
			});
		}).catch(() => {
			this.$message.erro('图片打包失败，请重新下载！');
		});
	}
}