前端实现批量导出图片并打包压缩功能

gghyoo 发布于2019-08-23 15:22 / 2834人阅读

摘要：需求管理后台需要批量导出二维码图片实现难点选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里思路分析先将选中二维码的地址存在一个数组中依次请求图片并将其下载后用压缩文件最后用生成文件实现实现的代码如下批量下载下载文件并存成对象获

需求

管理后台需要批量导出二维码图片

实现难点

选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里

思路分析

1.先将选中二维码的地址存在一个数组中
2.依次请求图片并将其下载
3.后用jszip压缩文件
4.最后用file-saver生成文件

实现

实现的代码如下

import axios from "axios"
import JSZip from "jszip"
import FileSaver from "file-saver"
getFile = (url) => {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "arraybuffer"
        }).then(data => {
          resolve(data.data)
        }).catch(error => {
          reject(error.toString())
        })
      })
    };
}
// 批量下载
handleBatchDownload = async(selectImgList) => {
      const data = selectImgList;
      const zip = new JSZip()
      const cache = {}
      const promises = []
      await data.forEach(item => {
          const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.split("/");
          let file_name = arr_name[arr_name.length - 1] // 获取文件名
          // if (file_name.indexOf(".png") == -1) {
         //    file_name = file_name + ".png"
         // }
          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, "photo.zip") // 利用file-saver保存文件
        })
      })
    
};

知识点总结

1.插件file-saver的使用

a标签download属性下载不了跨域图片直接在浏览器预览，利用file-saver将跨域访问的图片下载

可以file-saver下载其他文件，详情可去参考其API

如果你需要保存较大的文件，不受 blob 的大小限制或内存限制，可以看一下更高级的 StreamSaver.js

2.插件jszip的使用

点击批量下载所有图片都在浏览器下载文件多表现不友好，需将批量下载的图片打包进压缩包里，故引进了JSZip进行打包

JSZip是一个用于创建，阅读和编辑.zip文件的JavaScript库，具有友好而简单的API,详细用法可以参照其API

备注：

注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的),那么用responseType: "text"也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer

如果下载的文件过大, 打包的时间将会很长, 甚至可能会导致浏览器奔溃

还需要注意的一点是请求图片资源时因其是异步请求，需要等所有图片请求完再进行打包这一步，在请求资源时需要await

参考文档

file-saver地址
JSZip参考文档地址

GPU云服务器云服务器 php保存图片并压缩服务器图片批量压缩 php打包压缩 Bundle打包压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101949.html

前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
gulp入门

摘要：通过输入文件流，将文件写入硬盘，并输出所有数据，能继续向下游，所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在，就会创建它。第二个参数，当前任务依赖的任务列表，依赖任务在当前任务运行之前完成。 gulp 简介用自动化构建工具增强你的工作流程。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。利用 Node.js 流的威力，你可以快速构建项目并...

kycool 2019-08-23 14:44 评论0 收藏0
聊聊webpack

摘要：但是由于缺乏规范化管理，出现了很多种模块化规范，从针对的规范，到针对浏览器端的，终于在里规范了前端模块化。可以通过两种方式之一终端或。导出多个配置对象运行时，所有的配置对象都会构建。在阶段又会发生很多小事件。随着前端的迅速发展，web项目复杂度也是越来越高。为了便捷开发和利于优化，将一个复杂项目拆分成一个个小的模块，于是模块化开发出现了。但是由于缺乏规范化管理，出现了很多种模块化规范...

Ashin 2019-08-26 10:21 评论0 收藏0
关于前端实现文件下载功能

摘要：问题以上两种方式，当在下载格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。优点：最简洁；弊...

Arno 2019-08-23 17:54 评论0 收藏0
【长期更新】盘一盘那些 uTools 高质量插件，让你的工作效率瞬间提升N倍！

摘要：参考增强神器，文档搜索效率何止翻倍推荐系数图片展示快速获取文件文件夹名称插件来源开发者插件介绍如名，鼠标选中文件或者文件夹，点击鼠标中键激活插件即可将文件文件夹名称复制到剪切板。 ...

remcarpediem 2021-09-02 15:41 评论0 收藏0