解决图片下载IE浏览器打开新页面的问题

2022-03-18

前言

在后台管理系统中，时常会有下载图片的需求，但在开发过程中发现，通过a标签下载的话，IE浏览器的下载表现是打开新的页面显示图片，并不是直接下载。为了兼容性，如果浏览器为IE时，使用window.navigator.msSaveBlob方法实现。

核心代码

这个可以下载图片，也可以下载文件

// 判断浏览器类型
    function myBrowser() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent.indexOf("OPR") > -1) {
            return "Opera";
        }; //判断是否Opera浏览器 OPR/43.0.2442.991
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器  Firefox/51.0
        if (userAgent.indexOf("Trident") > -1) {
            return "IE";
        } //判断是否IE浏览器  Trident/7.0; rv:11.0
        if (userAgent.indexOf("Edge") > -1) {
            return "Edge";
        } //判断是否Edge浏览器  Edge/14.14393
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        } // Chrome/56.0.2924.87
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
    }

    // 判断文件是否为图片类型
    function isImage(ext) {
        if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif' || ext == 'bmp') {
            return true;
        }
    }
    // download(type, data, name)：
    // type: 1 或 2（ 用于判断传入的是地址还是canvas对象 ）
    // data: type = 1 时传入文件地址； type = 2 时传入一个canvas对象（ 配合html2canvas使用 ）
    // name: 下载图片默认文件名（ type = 1 时设置''为地址默认文件名, type = 2 时 name 不能为空 ）
    // 注：name 参数虽然只有在下载文件类型为图片时生效，但为避免出错都需要传入一个值
    // 例：download(1, url, '') 或 download(2, canvas对象, '图片附件')
    function download(type, data, name) {
        if (type == 1) {
            var url = data;
            // 通过地址判断是否为图片类型文件
            var ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
            if (isImage(ext)) {
                convertUrlToBase64(url).then(function (base64) {
                    var blob = convertBase64UrlToBlob(base64);
                    // 下载
                    if (myBrowser() == 'IE') {
                        window.navigator.msSaveBlob(blob, name + '.jpg');
                    } else {
                        var a = document.createElement('a');
                        a.download = name;
                        a.href = URL.createObjectURL(blob);
                        a.style.display = 'none'
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }
                });
            } else {
                var a = document.createElement('a');
                a.download = name;
                a.href = url;
                a.style.display = 'none'
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        } else {
            var dataURL = data.toDataURL('image/jpeg', 1.0);
            var base64 = {
                dataURL: dataURL,
                type: 'image/jpg',
                ext: 'jpg'
            };
            var blob = convertBase64UrlToBlob(base64);
            // 下载
            if (myBrowser() == 'IE') {
                window.navigator.msSaveBlob(blob, name + '.jpg');
            } else {
                var _a = document.createElement('a');
                _a.download = name;
                _a.href = URL.createObjectURL(blob);
                _a.style.display = 'none'
                document.body.appendChild(_a);
                _a.click();
                document.body.removeChild(_a);
            }
        }
    }

    /**
     * 将 base64 转换位 blob 对象
     * blob 存储 2进制对象的容器
     * @export
     * @param {*} base64
     * @returns
     */
    function convertBase64UrlToBlob(base64) {
        var parts = base64.dataURL.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; i++) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
    }

    /**
     * 将图片地址转换为 base64 格式
     *
     * @param {*} url
     */
    function convertUrlToBase64(url) {
        return new Promise(function (resolve, reject) {
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.src = url;
            img.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
                var dataURL = canvas.toDataURL('image/' + ext);
                var base64 = {
                    dataURL: dataURL,
                    type: 'image/' + ext,
                    ext: ext
                };
                resolve(base64);
            };
        });
    }

使用方法

download(type, data, name)：

type: 1 或 2（用于判断传入的是地址还是canvas对象）

data: type = 1 时传入文件地址； type = 2 时传入一个canvas对象（配合html2canvas使用）

name: 下载图片默认文件名（ type = 1 时设置’’为地址默认文件名, type = 2 时 name 不能为空）
注：name 参数虽然只有在下载文件类型为图片时生效，但为避免出错都需要传入一个值
例：download(1, url, ‘’) 或 download(2, canvas对象, ‘图片附件’)

案例

解决IE浏览器不兼容es6的问题

1	<script src="./browser.min.js"></script>

解决IE浏览器不兼容new promise的问题

1	<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="test.png" id="img" alt="" style="width: 100px; height: 100px;">
<script src="./browser.min.js"></script>
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/babel">
    document.getElementById('img').onclick = function () {
        download(1,'./test.png','test.png')
    }
</script>
</body>
</html>

参考链接：https://www.jianshu.com/p/8447257b8d35