点击下载图片(兼容ie)-蒲公英云

点击下载图片(兼容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');
        });
    }
},