zoukankan      html  css  js  c++  java
  • 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}))// 兼容火狐
        },
    
  • 相关阅读:
    java-抽象类
    java-接口
    java-面向对象总结
    java-单例设计模式
    java数组
    .Net框架整理
    PHP结合memcacheq消息队列解决并发问题
    浅谈DDos攻击
    PHP+ffmpeg+nginx的配置实现视频转码(转)
    使用Nginx的X-Accel-Redirect实现大文件下载
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/10958722.html
Copyright © 2011-2022 走看看