通过转成Blob文件下载base64图片（兼容IE）

最新推荐文章于 2024-08-08 09:42:35 发布

_let

最新推荐文章于 2024-08-08 09:42:35 发布

阅读量4.8k

点赞数

分类专栏：前端文章标签： base64 图片 Blob

本文链接：https://blog.csdn.net/qq_39759115/article/details/78632624

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

// ------------------------ base64 转 Blob ，并装到数组中 ---------------------------------------------
                    var imgInfo, // 图片信息
                        downloadImgArr=[]; // 装所有图片信息的数组
                    var blob_ = dataURLtoBlob(base64);

                    imgInfo = {
                        name: "图片名称", // 无后缀名
                        src: blob_
                    };
                    downloadImgArr.push(imgInfo);
                    // base64 转 Blob
                     function dataURLtoBlob(dataurl) {
                            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                            while (n--) {
                                u8arr[n] = bstr.charCodeAt(n);
                            }
                            return new Blob([u8arr], { type: mime });
                    }


// ------------------------ 下载 ---------------------------------------------

                    (function($) {
                            var methods = {
                                _download: function(options) {
                                    var triggerDelay = (options && options.delay) || 100; // 触发延迟
                                    var removeDelay = (options && options.removeDelay) || 1000;
                                    if (options.source === "local") {
                                        this.each(function(index, item) {
                                            methods._createLink(item, index * triggerDelay, removeDelay);
                                        });
                                    }
                                },

                                //download属性设置
                                _createLink: function(url, triggerDelay, removeDelay) {
                                    if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE
                                        navigator.msSaveBlob(url.src, url.name+'.png');//filename文件名包括扩展名，下载路径为浏览器默认路径
                                    } else {
                                        var link = document.createElement("a");
                                        link.setAttribute("href", window.URL.createObjectURL(url.src));
                                        link.setAttribute("download", url.name+'.png');
                                        document.body.appendChild(link);
                                        link.click();
                                    }
                                }
                            };
                            $.fn.multiDownload = function(options) {
                                methods._download.apply(this, arguments);
                            };
                        })(jQuery);
                        $(function() {
                            $(".downloadBtn").click(function() {
                                $(downloadImgArr).multiDownload({"source":"local"});
                        });