点击下载图片(兼容ie)

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

解决:

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');
        });
    }
},

完成!