兼容ie的下载图片---判断浏览器方式--判断微信方式··下载导出

针对问题: 各个浏览器下载图片 兼容ie

 handleDown (row) {
      // 生成时间戳避免图片名称相同
      var t = new Date().getTime()
      const imgUrl = row.qrcodeUrl + '?t=' + t
      // 判断ie浏览器
      if (this.Global.isIE()) {
        this.saveAs(imgUrl)
        return
      }

      const image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      debugger
      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.height)
        const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        const a = document.createElement('a') // 生成一个a元素
        const event = new MouseEvent('click') // 创建一个单击事件
        a.download = '活码二维码.png' || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.crossOrigin = '' // 切记一定要将这个放在src赋值前,要不然会在safari上报安全错误
      image.src = imgUrl

      // var a = document.createElement('a') // 创建一个a节点插入的document
      // var event = new MouseEvent('click') // 模拟鼠标click点击事件
      // a.target = '_blank' // 针对 ie模式 的浏览器
      // a.download = row.qrcodeUrl // 设置a节点的download属性值,图片名称
      // a.href = row.qrcodeUrl // 将图片的src赋值给a节点的href
      // a.dispatchEvent(event)
      // // this.Global.downloadBlob(row.qrcodeUrl)
    },
    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')
        })
      }
    },
    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()
      })
    },

• 补充

this.Global.isIE()

是

 isIE () {
    if (!!window.ActiveXObject || 'ActiveXObject' in window) { return true } else { return false }
  }

• 再补充 判断浏览器方式

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
}

• 再补充 判断微信方式

export function envjudge () {
  var isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) // 是否手机端
  var isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信
  var isComWx = /wxwork/i.test(navigator.userAgent) // 是否企业微信

  if (isComWx && isMobile) { // 手机端企业微信
    return 'com-wx-mobile'
  } else if (isComWx && !isMobile) { // PC端企业微信
    return 'com-wx-pc'
  } else if (isWx && isMobile) { // 手机端微信
    return 'wx-mobile'
  } else if (isWx && !isMobile) { // PC端微信
    return 'wx-pc'
  } else if (isMobile) { // 不是手机端
    return 'isMobile'
  } else {
    return 'other'
  }
}

• 补充–下载导出

 downloadBlob (data, fileName) { // 下载导出
    const blob = new Blob([data])
    if (navigator.msSaveOrOpenBlob) {
      navigator.msSaveOrOpenBlob(blob, fileName)
    } else {
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    }
  }

+ 调取接口

    async exportLeads () {
      const that = this
      const params = {
        surveyId: that.$route.query.surveyId
      }
      const res = await exportActivitiesCouponsTemplate(params)
      that.Global.downloadBlob(res.data, '电子奖券链接模版.xlsx')
    }

大家有什么好的方式欢迎补充 拜了个白