base64图片下载

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

下面这种写法有些chrome不起作用

     downLoadCanvas (data, filename = '活动.png') {

       var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')

       saveLink.href = data

       saveLink.download = filename

       var event = document.createEvent('MouseEvents')

       event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

       saveLink.dispatchEvent(event)

    }

换这种写法之后OK，base64转blob

    saveImg () {

      html2canvas(this.$refs.imageTofile, {

        backgroundColor: null

      }).then((canvas) => {

        let url = canvas.toDataURL('image/png')

        let downloadName = this.detailData.basic.act_name + '.png'

        this.downloadFile(downloadName, url)

      })

    },

    base64ToBlob (code) {

      let parts = code.split(';base64,')

      let contentType = parts[0].split(':')[1]

      let raw = window.atob(parts[1])

      let rawLength = raw.length

      let uInt8Array = new Uint8Array(rawLength)

      for (let i = 0; i < rawLength; ++i) {

        uInt8Array[i] = raw.charCodeAt(i)

      }

      return new Blob([uInt8Array], {type: contentType})

    },

    downloadFile (fileName, content) {

      let aLink = document.createElement('a')

      let blob = this.base64ToBlob(content) // new Blob([content]);

      let evt = document.createEvent('HTMLEvents')

      evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为

      aLink.download = fileName

      aLink.href = URL.createObjectURL(blob)

      aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))// 兼容火狐

    },