【无标题】

最新推荐文章于 2024-07-14 18:10:31 发布

随心ಥ

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量24

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_51774854/article/details/135012515

版权

// 下载svg
const downSvg = () => {
  let type = 'svg'
  // html中需要导出的部分的id为sankey
  const element: any = document.getElementById('chinaMap')
  const chartInstance: any = echarts.getInstanceByDom(element)
  if (element) {
    // echarts官网文档实例方法getDataURL
    let picInfo = chartInstance.getDataURL({
      type: 'png',
      pixelRatio: 1.0, // 放大两倍下载。解决生成图片在移动端模糊问题
      backgroundColor: '#fff',
      excludeComponents: ['toolbox'] // 导出时忽略toolbox组件
    }) // 获取到的是一串base64信息

    let mycanvas = document.querySelector('#' + element.id + ' canvas')

    //设置svg标签属性
    let svg0 = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
    svg0.setAttribute('version', '1.1')
    svg0.setAttribute('height', '700')
    svg0.setAttribute('width', '890')
    let img3 = document.createElementNS('http://www.w3.org/2000/svg', 'image')
    // base64编码写入href
    img3.href.baseVal = picInfo
    img3.setAttribute('height', '700')
    img3.setAttribute('width', '890')
    svg0.appendChild(img3)
    let h = svg0.outerHTML
    //给图片对象写入base64编码的svg流
    let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)))

    const elink = document.createElement('a')
    // 设置默认文件名，this.chartTitle为绘图时生成的标题
    elink.download = '桑基图' + '.svg'
    elink.style.display = 'none'
    elink.href = data
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  }
}




// 下载png
const exportCanvasAsPNG = () => {
  let divElement: HTMLElement = document.getElementById('chinaMap') as HTMLElement

  let canvasElement: HTMLCanvasElement = divElement.children[0].children[0] as HTMLCanvasElement
  let MIME_TYPE = 'image/png'

  let imgURL = canvasElement.toDataURL(MIME_TYPE)

  let dlLink = document.createElement('a')
  dlLink.download = 'text'
  dlLink.href = imgURL
  dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':')

  document.body.appendChild(dlLink)
  dlLink.click()
  document.body.removeChild(dlLink)
}