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}))// 兼容火狐
    },