vue将文件图片批量打包下载zip

各种格式都可以,只要url能够打开或者下载文件即可.

1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip

步骤：

（1）安装依赖
npm install jszip
npm install file-saver

（2）在页面的script中引入依赖
import JSZip from 'jszip'
import FileSaver from 'file-saver'

（3）代码（完整代码）

<template><div><button @click="handleBatchDownload">批量下载文件和图片</button></div>
</template><script>
// 导入依赖
import JSZip from "jszip";
import FileSaver from "file-saver";export default {name: "fileUPload",methods: {handleBatchDownload() {let fileArr = [{fileUrl:"http://122.51.249.55:7005/upload/image/2022/06/1654346321493.png",fileName: "图片1",},{fileUrl:"http://122.51.249.55:7005/upload/image/2022/06/1654346321493.png",fileName: "图片2",},];// 调用filesToRar函数  ( fileArr中的fileUrl是文件的完整路径)//filesToRar(参数1：文件数组形式[{fileUrl:文件url,fileName:文件名}]，参数2：压缩包名)this.filesToRar(fileArr, "图片和文件");},/**文件打包* arrImages:文件list:[{fileUrl:文件url,fileName:文件名}]* filename 压缩包名* */filesToRar(arrImages, filename) {let _this = this;let zip = new JSZip();let cache = {};let promises = [];_this.title = "正在加载压缩文件";for (let item of arrImages) {const promise = _this.getImgArrayBuffer(item.fileUrl).then((data) => {// 下载文件, 并存成ArrayBuffer对象(blob)zip.file(item.fileName, data, { binary: true }); // 逐个添加文件cache[item.fileName] = data;});promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then((content) => {_this.title = "正在压缩";// 生成二进制流FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名_this.title = "压缩完成";});}).catch((res) => {_this.$message.error("文件压缩失败");});},//获取文件blobgetImgArrayBuffer(url) {let _this = this;return new Promise((resolve, reject) => {//通过请求获取文件blob格式let xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", url, true);xmlhttp.responseType = "blob";xmlhttp.onload = function () {if (this.status == 200) {resolve(this.response);} else {reject(this.status);}};xmlhttp.send();});},},
};
</script><style></style>

vue将文件图片批量打包下载zip相关推荐

PHP使用ZipArchive对文件进行批量打包下载
PHP使用ZipArchive对文件进行批量打包下载话不多说直接上图 DEMO 代码示例 <?php$file = $_GET['file'];//文件判断,无文件阻止if(!$file){e ...
php 打包下载网络图片,PHP实现图片批量打包下载功能
上次遇到一个需要打包下载批量图片的问题,找了一下发现这个好方法,记录一下. 首先新建一个zipfile打包类: class zipfile { var $datasec = array (); var ...
php中实现图片批量打包下载,bash搭配php批量下载图片实现代码
看到一个图片网站,很多漂亮图片,所以想要保存下来. 但是图片太多了.一个一个右键保存的话,不知道要保存到什么时候. 批量保存的话,Linx中好像还没有像迅雷那样的保存本网页所有图片的选项,况且,有好多 ...
阿里云OSS文件批量打包下载
阿里云OSS文件批量打包下载 public void downloadReport(List<String> fileNames,HttpServletResponse response) ...
JAVA实现文件批量打包下载
JAVA实现文件批量打包下载实现 1.打包工具类的实现 /*** @author zhouxuan* @since 2019/4/19*/ public class ZipUtils {/*** @ ...
java文件下载功能代码（单文件下载、多文件批量打包下载）——普遍适用
一.前言程序员在做web等项目的时候,往往都需要添加文件上传.下载.删除的功能,有时是单文件,有时多文件批量操作,而这些功能的代码程序员可以自己收藏起来当成工具使用,这样,程序员在进行程序设计 ...
php本地文件打包代码,PHP实战：几行代码轻松实现PHP文件打包下载zip
<PHP实战:几行代码轻松实现PHP文件打包下载zip>要点: 本文介绍了PHP实战:几行代码轻松实现PHP文件打包下载zip,希望对您有用.如果有疑问,可以联系我们. PHP应用 //获 ...
python 实现文件的批量压缩为.zip格式+.zip格式文件的解析
python 实现文件的批量压缩为.zip格式+.zip格式文件的解析 python 实现文件的批量压缩为.zip格式 Python解析.zip文件的常见函数 python 实现文件的批量压缩为.zi ...
NO.17——应用Scrapy框架实现美女图片的打包下载
一.基础知识 Scrapy是基于Twisted的异步处理框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates ...
Java 批量文件不打包下载_【Java】Java批量文件打包下载zip
/* * 另存为 */ @RequestMapping("/saveAs.do") public @ResponseBody void saveAs(String filePath ...

vue将文件图片批量打包下载zip

vue将文件图片批量打包下载zip相关推荐

最新文章

热门文章