Jszip的使用和打包下载图片

57 阅读 0 评论 38 点赞

我是靠谱客的博主友好航空，最近开发中收集的这篇文章主要介绍Jszip的使用和打包下载图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

因为canvas总结到后面又想到了jszip的一些事情，那就索性也回去看看吧。试过，至少谷歌和火狐都是支持jszip的。

1、 jszip的使用

官方文档说的很清楚了，而且也有读取zip文件、生成zip文件下载的js代码示例，下面就简单说说吧。

　　<1>读取zip文件，一般用于上传zip文件后读取内容，不过我懒得写input结构，并没有实现，只是了解一下，官网文档有相关说明。

//****读取zip文件，可以用在文件上传时，content就需要传入一个file
var new_zip = new JSZip();
                    
new_zip.loadAsync(content)
    .then(function(zip) {
           new_zip.file("hello.txt").async("string")；//读取压缩包后可以读取其中文件的内容
    });

　　<2>在压缩包中生成文件夹文件并下载

<!DOCTYPE html>
<html lang="zh-cn">  
    <head>  
        <meta charset="UTF-8"/>  
        <script type="text/javascript" src="js/jszip.min.js"></script>
        <script src="js/FileSaver.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>  
    <body> 
        <button id="download">下载</button>
 

        <script>
            window.onload=function(){
                document.getElementById('download').onclick = function(){
                    var zip = new JSZip();//*****创建实例，zip是对象实例
                    
                    //********在zip中创建和更新文件/文件夹
                    zip.file("hello.txt", "Hello World1n");//创建一个文件
                    zip.file("hello.txt", "aHello World2n");//更新文件内容
                    zip.file("me.txt", "myselfn");
                    zip.file("nested/hello.txt", "Hello World3n");//创建一个文件夹，并在文件夹中创建一个文件
                    zip.folder("nested").file("hello.txt", "Hello World4n");//与上一句相同，所以是对已存在文件进行更新操作
                    
                    console.log(zip);
                    //********移除文件
                    //zip.remove("me.txt");//移除文件
                    //zip.remove("nested");//移除文件夹的时候，会把文件夹中的文件一起移除
                    //console.log(zip);
                    
                    //********读取zip中的某个文件文件夹的数据
                    zip.file("hello.txt").async("string").then(function (data) {
                        console.log(data);//输出字符串
                    });
 
                    if (JSZip.support.uint8array) {
                        zip.file("hello.txt").async("uint8array").then(function (data) {
                            console.log(data);//输出对应的ascii码
                        });
                    }
                    
                    //********将zip生成一个存在内存的文件，不是真正的压缩包，需要使用FileSaver.js保存并触发下载
                    var promise = null;
                    if (JSZip.support.uint8array) {
                        promise = zip.generateAsync({type : "uint8array"});
                    } else {
                        promise = zip.generateAsync({type : "string"});
                    }
                    console.log(promise);
                    var promise = null;
                    if (JSZip.support.uint8array) {
                        promise = zip.generateAsync({type : "uint8array"});
                    } else {
                        promise = zip.generateAsync({type : "string"});
                    }
                    console.log(promise);
                    /****读取zip文件，可以用在文件上传时，content就需要传入一个file
                    var new_zip = new JSZip();
                    
                    new_zip.loadAsync(content)
                    .then(function(zip) {
                        new_zip.file("hello.txt").async("string")；
                    });//*/
                    
                    //******保存并下载压缩包
                    zip.generateAsync({type:"blob"}).then(function (blob) { 
                        saveAs(blob, "hello.zip");                          
                    }, function (err) {//报错处理
        
                    });    
                    
                }
            }
        </script>
    </body>
</html>

View Code

2、打包下载图片

之前会涉及jszip也是为了进行前端打包图片并下载。前面也说了很多，将图片转为压缩包文件的方法就是获取图片对应的base64数据，根据base64数据生成文件。代码如下：

<!DOCTYPE html>
<html lang="zh-cn">  
    <head>  
        <meta charset="UTF-8"/>  
        <script type="text/javascript" src="js/jszip.min.js"></script>
        <script src="js/FileSaver.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>  
    <body> 
        <button id="download">下载</button>
 

        <script>
        window.onload=function(){
            document.getElementById('download').onclick = function(){
                var zip = new JSZip();//*****创建实例，zip是对象实例
                var file_name = 'pic.zip';
                var array=['img/1.jpg','img/2.jpg','img/7.png'];
                var len=function(arr){
                    var l = 0;
                    for(var key in arr){
                        l++;
                    }
                    return l;
                }
                for(let i=0;i<array.length;i++){
                    //对每一个图片链接获取base64的数据，并使用回调函数处理
                    getBase64Image(array[i],function(dataURL){
                        //对获取的图片base64数据进行处理
                        var img_arr = dataURL.split(',');
                        zip.file(i.toString()+'.jpg',img_arr[1],{base64: true});//根据base64数据在压缩包中生成jpg数据
                        var ziplength = len(zip.files);
                        if(ziplength==array.length){//当所有图片都已经生成打包并保存zip
                            zip.generateAsync({type:"blob"})
                            .then(function(content) {
                                //console.log(content);
                                saveAs(content, file_name);
                            });
                        }
                    });
                    
                }
                    
                        
                
            }
        
        }
        //****传入图片链接，返回base64数据
        function getBase64Image(images,callback) {
            var img = new Image();
            var canvas = document.createElement("canvas");
            img.onload = function(){
                canvas.getContext("2d").drawImage(img,0,0);
                var dataURL=canvas.toDataURL();//使用canvas获取图片的base64数据
                
                callback?callback(dataURL):null; //调用回调函数
      
            } 
            img.src = images;
        }
        </script>
    </body>
</html>