前端批量打包下载文件

最近有个需求需要前端批量打包文件的需求，然后经过搜索，使用到了 jszip 和 file-saver 这两个 js 插件。

jszip 压缩插件，这个插件用起来个人觉得还算比较容易，官方文档下，仅仅需要几行代码便可以导出一个压缩包文件。

官方示例代码如下，写了简单的注释：

var zip = new JSZip();                           // 初始化jszip对象
zip.file("Hello.txt", "Hello World\n");          // 添加一个 hello.txt 文件，内容为 Hello World
var img = zip.folder("images");                  // 生成一个 images 文件夹
img.file("smile.gif", imgData, {base64: true});  // 在 images 文件夹中加入一个 smile.gif 文件，内容为 base64，options 中 base64 要设置为 true// 这里接下来是将文件流同步生成压缩文件，并使用 file-saver 保存导出
zip.generateAsync({type:"blob"}).then(function(content) {// see FileSaver.jssaveAs(content, "example.zip");
});

在业务代码里面，由于有多个文件，所以我的代码里面写了的是循环遍历的的，具体代码如下：

<template><div><p>只要有一个文件下载失败，就停止下载</p><button @click="download(1)" >点击下载</button><br /><p>忽略在下载失败文件，可以继续下载</p><button @click="download(2)" >点击下载</button></div></template><script>export default {name: 'BatchDownload',data () {return {}}，methods: {// 只要有一个失败，那就就停止下载async downloadAll1 (files, filename) {let zip = new JsZip()let isFault = falsefor (let i = 0; i < files.length; i++) {let folder = files[i]let newFolder = zip.folder(folder.folderName)await new Promise((resolve, reject) => {return folder.files.reduce((accumulator, item, index) => {return accumulator.then(() => fetch(item.url).then(resp => {if (resp.status !== 200) {reject(` ${folder.folderName} 的日志文件 ${item.name} 下载失败，已停止下载`)} else {return resp.blob()}}).then(blob => {newFolder.file(item.name, blob)if (index === folder.files.length - 1) {resolve()}}))}, Promise.resolve())}).catch(err => {this.$alert(err, '错误', {confirmButtonText: '确定',type: 'warning'})isFault = true})if (isFault) {break}}if (!isFault) {zip.generateAsync({type: "blob"}).then(content => {saveAs(content, `${filename}.zip`)})}},// 全部下载，失败了那就再文件名后面加上‘下载失败’async downloadAll2 (files, filename) {let zip = new JsZip()let failedFiles = []          // 下载失败文件let filesCount = 0            // 总文件for (let i = 0; i < files.length; i++) {let folder = files[i]let newFolder = zip.folder(folder.vin)await new Promise((resolve, reject) => {return folder.files.reduce((accumulator, item, index) => {filesCount++return accumulator.then(() => fetch(item.url).then(resp => {if (resp.status !== 200) {reject(`${folder.vin}/${item.name}`)} else {return resp.blob()}}).then(blob => {if (!blob) {newFolder.file(`${item.name}.下载失败`, blob)} else {newFolder.file(item.name, blob)}if (index === folder.files.length - 1) {resolve()}}))}, Promise.resolve())}).catch(err => {failedFiles.push(err)})}// 下载后提示文案let htmlString = `<div>下载成功${filesCount - failedFiles.length}个文件，下载失败${failedFiles.length}个</div>`if (failedFiles.length > 0) {let filesHtmlString = '<div>失败文件列表如下：</div>'failedFiles.forEach(ele => {filesHtmlString += `<p>${ele}</p>`})htmlString += filesHtmlString}this.$alert(htmlString, '提示', {confirmButtonText: '确定',type: failedFiles.length > 0 ? 'warning' : 'success',dangerouslyUseHTMLString: true})zip.generateAsync({type: "blob"}).then(content => {saveAs(content, `${filename}.zip`)})},download(s) {let files = [{folderName: '123456',files: [{name: 'a.svg', url: 'http://localhost:8080/img/beian-icon.png'},{name: 'b.svg', url: 'http://localhost:8080/img/beian-icon.png'}]},{folderName: '7890',files: [{name: 'c.svg', url: 'http://localhost:8080/img/beian-icon.png'},{name: 'd.svg', url: 'http://localhost:8080/img/beian-icon.png'}]}]if (s === 1) {this.downloadAll1(files, '文件集合')} else {downloadAll2(files, '文件集合')}},}}</script><style lang="scss" scoped></style>

但是，在使用过程中发现了一些问题，比如我通过 ajax 请求下来文件，大小大概是 100MB 左右，但是 zip.file() 方法添加进去了，但是文件内容是报错的，导出的是空文件，我估计是浏览器限制或者浏览器内存限制了，希望有用到这个插件的朋友也说说使用体验。

再说一下，这个需求由于前端打包失败了，后面改成了直接下载好几个文件的那种办法，不过还是用 ajax 请求文件流，方便修改下载文件的名字。

前端批量打包下载文件相关推荐

前端批量打包下载图片
1.批量下载图片(jquery) <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
java文件下载功能代码（单文件下载、多文件批量打包下载）——普遍适用
一.前言程序员在做web等项目的时候,往往都需要添加文件上传.下载.删除的功能,有时是单文件,有时多文件批量操作,而这些功能的代码程序员可以自己收藏起来当成工具使用,这样,程序员在进行程序设计 ...
JAVA实现文件批量打包下载
JAVA实现文件批量打包下载实现 1.打包工具类的实现 /*** @author zhouxuan* @since 2019/4/19*/ public class ZipUtils {/*** @ ...
阿里云OSS文件批量打包下载
阿里云OSS文件批量打包下载 public void downloadReport(List<String> fileNames,HttpServletResponse response) ...
PHP使用ZipArchive对文件进行批量打包下载
PHP使用ZipArchive对文件进行批量打包下载话不多说直接上图 DEMO 代码示例 <?php$file = $_GET['file'];//文件判断,无文件阻止if(!$file){e ...
php文件管理打包,Thinkphp6如何利用ZipArchive打包下载文件
下面给大家介绍Thinkphp6利用ZipArchive打包下载文件的方法,希望对需要的朋友有所帮助!基础环境系统环境:Windows10 x64 PHP集成环境:phpstudy PHP依赖管理工 ...
批量打包下载阿里OSS文件
有需求的地方就有方法,批量下载oss文件,上一章说的是从前端的角度实现批量一个个间断性下载,但是存在一定问题(1.用户体验不好,2.多次下载或弹窗需要修改浏览器配置,且有时候存在请求被取消的风险,操作 ...
springboot+oss文件批量打包下载
1 默认项目已经配置并连接成功OSS客户端 @Resource private OSSClient ossClient; 2 具体实现代码 public void batchDownLoadFile( ...
ASP.NET多文件批量打包下载
在项目实施中,遇到了将多个文件一起打包后,提供给用户下载.如:在一个ASP.NET的开发项目中,通过一个GridView选中对应行数据的CheckBox,就可以实现对选中文件的打包下载了. 在对多文件 ...

前端批量打包下载文件

前端批量打包下载文件相关推荐

最新文章

热门文章