如何从 ApexCharts 获取 URI 以下载 PDF？

Question

我已经实现了 ApexCharts 并希望将其输出到 PDF 文档中。

我试图从chart.dataURI获取下载 URI，但失败并出现错误：

chart.dataURI 不是函数

下面是 Apex 条形图的创建和我对下载 URI 的尝试，但它没有获取：

var options = {
  chart: {
    height: 450,
    type: 'bar',
    width: 1000,
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '40%',
      endingShape: 'rounded'
    },
  },
  dataLabels: {
    enabled: false
  },
  colors: ['#008000', '#d4a823', '#f92525'],
  stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
  },
  series: [{
    name: 'Good',
    data: JSON.stringify(graph_data.good)
  }, {
    name: 'Okey',
    data: JSON.stringify(graph_data.ok)
  }, {
    name: 'Bad',
    data: JSON.stringify(graph_data.bad)
  }],
  xaxis: {
    categories: graph_data.month,
  },
  yaxis: {
    title: {
      text: 'Smiley Percentage'
    }
  },
  fill: {
    opacity: 1

  },
  tooltip: {
    y: {
      formatter: function(val) {
        return val + " Smileys"
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector("#monthlyhistory"), options);
var dataURL = chart.dataURI().then((uri) => {  // Here shows an error
  console.log(uri);
  var pdf = new jsPDF();
  pdf.addImage(uri, 'PNG', 0, 0);
  pdf.save("download.pdf");
})}

我希望以 PDF 格式输出，但它不起作用。

Answer 1

在调用chart.dataURI()函数之前，您需要呈现图表（我在您的问题中找不到）

render函数返回一个 promise，因此您可以在它的then()处理程序中链接任何其他代码。

像这样。

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render().then(() => {
    chart.dataURI().then(({ imgURI, blob }) => { 
        var pdf = new jsPDF();
        pdf.addImage(imgURI, 'PNG', 0, 0);
        pdf.save("download.pdf");
    })
})

这是有效的codepen 演示