前端zip下载导出

最新推荐文章于 2024-04-17 20:24:51 发布

wgod

最新推荐文章于 2024-04-17 20:24:51 发布

阅读量163

点赞数

文章标签：前端 tcp/ip javascript

本文链接：https://blog.csdn.net/weixin_44324124/article/details/121137652

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="./red.png" alt="">
    <img src="./www.png" alt="">
    <!-- <script src="./img.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
    <script>

        let obj1={
            a:1,
            b:1,
            cccc:1,
        };
        const obj = {
            id:1,
            name:'zhangsan',
            age:18
    }
    Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    
    })
        function downImg() {
            let imgs = document.getElementsByTagName('img')
            console.log(1111111, imgs);
            [].map.call(imgs, (el, idx, list) => {
                console.log(1111111, el.src);

                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload = function () {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = "photo"; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = el.src;
            })
        }
        // downImg()

        function zipDown() {
            var script = document.createElement("script");  //创建一个script标签
            script.type = "text/javascript";
            script.src = "https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.js";
            document.body.appendChild(script);
            var script1 = document.createElement("script");  //创建一个script标签
            script1.type = "text/javascript";
            script1.src = "https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js";
            function getBase64(img) {
                let url;
                if (IsBase64(img)) {
                    // 有一些数据 后台没有返回前缀
                    const _base64 = 'data:image/jpeg;base64,';
                    if (img.startsWith(_base64)) {
                        url = img;
                    } else {
                        url = _base64 + img;
                    }
                    return url;
                } else {
                    url = img;
                    const image = new Image();
                    image.crossOrigin = '*';
                    image.src = url;
                    return new Promise(function (resolve, reject) {
                        image.onload = function () {
                            resolve(getBase64Image(image));//将base64传给done上传处理
                        }
                    });
                }
            }

            function setBase64Img(zip, imgFolder, base64, imgArr, index, downloadName) {
                base64 = base64.split('base64,')[1];
                imgFolder.file(downloadName + '_' + index + '.png', base64, { base64: true });
                if (index === imgArr.length - 1) {
                    zip.generateAsync({ type: 'blob' }).then((blob) => {
                        saveAs(blob, downloadName + '.zip');
                    });
                }
            }

            function IsBase64(img) {
                // jpg jpeg png gif
                const _img = img.toLowerCase();
                if (_img.endsWith('jpg') || _img.endsWith('jpeg') || _img.endsWith('png') || _img.endsWith('gif')) return false;
                return true;
            }

            function getBase64Image(img, width = 0, height = 0) {
                const canvas = document.createElement('canvas');
                canvas.width = width ? width : img.width;
                canvas.height = height ? height : img.height;

                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                const dataURL = canvas.toDataURL();
                return dataURL;
            }

            function downloadZipImage(imgArr, imgKey = '', downloadName = 'img') {
                console.log(1111111, imgArr);
                if (!imgArr || !imgArr.length) {
                    return;
                }
                const zip = new JSZip();
                // 创建images文件夹
                const imgFolder = zip.folder('images');
                // test
                // imgArr = ['assets/img/charts/return-upper-level.png',
                // 'assets/img/tree/arrow_right.png',
                // 'assets/img/tree/arrow_left.png',
                // 'assets/img/charts/map_ShadowMap.png'];

                let index = 0; //  判断加载了几张图片的标识
                for (let i = 0; i < imgArr.length; i++) {
                    const itemImg = imgKey ? imgArr[i][imgKey] : imgArr[i];
                    /**
                     * 如果是Base64就不需要再做异步处理了
                     */
                    console.log(3333333, itemImg);
                    const Base64Img = getBase64(itemImg);
                    if (Base64Img['then']) {
                        Base64Img['then'](function (base64) {
                            setBase64Img(zip, imgFolder, base64, imgArr, index, downloadName);
                            index++;
                        }, function (err) {
                            console.log(err);//打印异常信息
                        });
                    } else {
                        setBase64Img(zip, imgFolder, Base64Img, imgArr, index, downloadName);
                        index++;
                    }
                }
            }
            let imgs = document.getElementsByTagName('img');
            let arr = [];
            [].map.call(imgs, (el, idx, list) => {
                arr.push(el.src)
            })
            downloadZipImage(arr)
        }
        // zipDown()
    </script>
</body>

</html>

wgod

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端zip下载导出

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫