点击下载图片(兼容ie)

柔光的暖阳◎ 2023-02-28 05:44 41阅读 0赞

## **需求: 点击按钮下载图片:** ##

#### 解决: ####

**1) 判断浏览器类型:**

myBrowser() { 
        var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf('OPR') > -1
        if (isOpera) {  return 'Opera' } // 判断是否Opera浏览器 OPR/43.0.2442.991
        // if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { return 'IE' } // 判断是否IE浏览器
        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
    }

**2) 下载方法:**

// 下载图片 传入下载地址
    down(imgUrl) { 
    	// 生成时间戳避免图片名称相同
        var t = new Date().getTime()
        const imgUrl = imgUrl+ '?t=' + t
        // 判断ie浏览器
        if (myBrowser() === 'IE' || myBrowser() === 'Edge') { 
            this.saveAs(imgUrl)
            return
        }
        const image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'Anonymous')
        image.onload = function() { 
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const context = canvas.getContext('2d')
            context.drawImage(image, 0, 0, image.width, image.heig
            const url = canvas.toDataURL('image/png') // 得到图片
            const a = document.createElement('a') // 生成一个a元素
            const event = new MouseEvent('click') // 创建一个单击
            a.download = '分享海报'
            a.href = url // 将生成的URL设置为a.href属性
            a.dispatchEvent(event) // 触发a的单击事件
        };
        image.crossOrigin = '' // 切记一定要将这个放在src赋值前,要不然会在safari上报安全错误
        image.src = imgUrl
    },
    /** * [getBlob 获取二进制流] * @param {[String]} url [url] * @param {[Blob]} [文件二进制] */
    getBlob(url) { 
        return new Promise(resolve => { 
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = () => { 
                if (xhr.status === 200) { 
                    resolve(xhr.response);
                }
            };
            xhr.send();
        });
    },
    /** * [saveAs 下载保存文件] * @param {[type]} fileUrl [文件地址] */
    saveAs(fileUrl) { 
        if (window.navigator.msSaveOrOpenBlob) { 
            // 兼容IE11 发现在微软在ie10 和ie11中有两个特有的方法：window.navigator.msSaveBlob和window.navigator.msSaveOrOpenBlob 方法，
            // 这两个方法的区别在于，前者只有保存，后者有保存和打开两个选项，按个人喜好使用就行
            this.getBlob(fileUrl).then(blob => { 
                window.navigator.msSaveBlob(blob, '分享海报.png');
            });
        }
    },

**完成!**