0

我希望将图表导出传递给特别需要 PNG 或 JPG 的组件，因此 SVG 将无法正常工作。

在其他 SO 答案的帮助下 - 我能够使用以下代码获得 SVG Base64：

let link = "data:image/svg+xml;base64," + btoa(this.lineChartRef.current.CHART.current.chart.getSVG());

有没有办法获得PNG base64？或者 React 中是否有一种有效的方法可以将此 SVG base64 转换为 PNG？

谢谢！！！

4

1 回答 1

2

感谢@ppotaczek 转发 [this SO post][1]，我能够为 React 创建以下解决方案。希望它会在未来帮助别人！

//Start by calling the chart options (using refs) into a variable and JSON stringify 
let chartoptions = this.lineChartRef.current.BrokerChart.current.chart.userOptions
    chartoptions = JSON.stringify(chartoptions)

//Create a data body with the following parameters 
    let data = {
      options: chartoptions,
      filename: 'LineChart',
      async: true
    }

    let url = "https://export.highcharts.com/"
    let returnedimageurl = ""
    //setState will be called within the Axios return so "This" must 
    let self = this

    axios({
     method: 'post',
     url: 'https://export.highcharts.com/',
     data: data,
    })
    .then(function (response) {
      returnedimageurl= url +response.data
      self.setState({
        activityChartPng: url
      }, self.allowDownload())
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    }); 

//The activityChartPvg state can then be passed as props to the React-PDF component


  [1]: https://stackoverflow.com/questions/54761784/highcharts-export-multiple-charts-using-jspdf
于 2020-03-27T13:51:47.700 回答