精品学习网->精美文摘

上一篇    全部文章



使用JSZIP与FILESAVER批量下载文件


1、FileSaver.js  :文件下载

使用:先引入js

                var  selectedFile  =  document.getElementById("files").files[i];//获取读取的File对象
                var  name  =  selectedFile.name;//读取选中文件的文件名
                var  size  =  selectedFile.size;//读取选中文件的大小
                console.log("文件名:"  +  name  +  "大小:"  +  size);
                var  reader  =  new  FileReader();//这里是核心!!!读取操作就是由它完成的。
                reader.readAsText(selectedFile);//读取文件的内容
                reader.onload  =  function  ()  {
                    jsonData  =  $.csv.toObjects(this.result);
                    //当读取完成之后会回调这个函数,然后此时文件的内容存储到了result中。直接操作即可。
                };
        for(let  i=0;i                var  content  =  JSON.stringify(result[i]);
                var  blob  =  new  Blob([content],  {type:  "text/plain;charset=utf-8"});
                saveAs(blob,  "salt-"  +  i  +  ".json");
            }
缺点:我需要下载很多json文件,但当我选择多个文件时,最终只下载十几个,不符合我的预期(测试:十五个以内能下载完全)。经过排查,不是异步问题(利用promise.all排查的)。

解决方法:引入jszip,把多个要下载json合适文件放在压缩包内,一起下载  

2、JSZip  :是一个用于创建、读取和编辑.zip文件的JavaScript库

使用,先引入jszip

        const  zip  =  new  JSZip();
  
        reader.onload  =  function  ()  {
                        jsonData  =  $.csv.toObjects(this.result);
                        var  blob  =  new  Blob([JSON.stringify(jsonData)],  {type:  "text/plain;charset=utf-8"});
                        const  file_name=i+1+'.json';
                        zip.file(file_name,blob);//传数据到文件中
                    };
        zip.generateAsync({  type:  'blob'  }).then(content  =>  {
                console.log(content)
                //  生成二进制流
                saveAs(content,  '文件下载.zip')  //  利用file-saver保存文件    自定义文件名
            })
难点:不知道怎么传json对象

zip.file(name,data),百度的时候搜到可以将字符串和图片放到文件夹中进行压缩,要不就越是ArrayBuffer,后面到官网看,发现data还可以是Blob对象,正好FileSaver中下载的就是Blob对象。



官网地址  

3、Blob对象、  ArrayBuffer对象:常见于文件上传操作处理(如处理图片上传预览等问题)

  (  序列化:内存中的数据对象只有转换为流才可以进行数据持久化和网络传输。发送到服务器的对象,其实输送的是字节流(五层模型),blob对象可以理解为将对象转换为这个流)

JSON.stringify()用来将value(string、object、array、number、boole、null等)序列化为json字符串

     返回顶部
使用JSZIP与FILESAVER批量下载文件