js本地下载

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

调用：

this.handleMenuClick('png','.chart-plate-card-body')"
this.handleMenuClick('jpg','.chart-plate-card-body')"

方法：

getChartSVG (val) { // 获取charts的svg
  return this.chart.getSVG(val)
},
// parClass为包裹charts的结构类名
downloadImg (type, parClass) {
  // 获取highcharts的svg图片
  const img = new Image()
  let target
  let svg
  // 将svg转化为canvas
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  if (parClass === 'default') {
  // 如果传入则会下载自定义尺寸的大小
    img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG({ chart: { width: 1920, height: 838 } }))))} `
    canvas.width = 1920
    canvas.height = 838
  } else {
  // 不传入默认下载当前chart在dom上显示的大小
    img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG({ chart: { width: this.chart.chartWidth, height: this.chart.chartHeight } }))))} `
    canvas.width = this.chart.chartWidth
    canvas.height = this.chart.chartHeight
  }
  const _this = this
  img.onload = function () {
    // svg图加载完毕后绘制到canvas上
    context.drawImage(img, 0, 0)
    // 将canvas转化为png图片
    const imgEle = new Image()
    const url = canvas.toDataURL(`image/${type}`)
    imgEle.src = url
    imgEle.onload = function () {
      const a = document.createElement('a')
      a.href = url
      a.download = _this.chartTitle || _this.downloadTitle
      // 触发a链接点击事件，浏览器开始下载文件
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}

优化：

getChartSVG (val) { // 获取charts的svg
  return this.chart.getSVG(val)
},
// parClass为包裹charts的结构类名
downloadImg (type, parClass) {
  // 获取highcharts的svg图片
  const img = new Image()
  let target
  let svg
  // 将svg转化为canvas
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  if (parClass === 'default') {
  // 如果传入则会下载自定义尺寸的大小
    img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG({ chart: { width: 1920, height: 838 } }))))} `
    canvas.width = 1920
    canvas.height = 838
  } else {
  // 不传入默认下载当前chart在dom上显示的大小
    img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG({ chart: { width: this.chart.chartWidth, height: this.chart.chartHeight } }))))} `
    canvas.width = this.chart.chartWidth
    canvas.height = this.chart.chartHeight
  }
  const _this = this
  img.onload = function () {
    // svg图加载完毕后绘制到canvas上
    context.drawImage(img, 0, 0)
    // 将canvas转化为png图片
    const imgEle = new Image()
    const url = canvas.toDataURL(`image/${type}`)
    imgEle.src = url
    imgEle.onload = function () {
      const a = document.createElement('a')
      a.href = url
      a.download = _this.chartTitle || _this.downloadTitle
      // 触发a链接点击事件，浏览器开始下载文件
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}