JSPDF在使用ApexCharts图表创建PDF时返回脚本错误。

Question

我正在尝试用ApexCharts创建一个可下载的PDF图表。目前，我只是在图表中填入了虚拟数据，并试图让下载PDF选项工作。然而，当我尝试运行它时，它在控制台返回一个脚本错误。这是我的JS。

function display() {
  var options = {
    chart: {
      type: 'bar'
    },
    series: [{
      name: 'sales',
      data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
    }],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  }

  var chart = new ApexCharts(document.querySelector("#chart"), options);

  chart.render();
}

function demoFromHTML() {
  var pdf = new jsPDF();
  pdf.addImage(chart, 'PNG', 0, 0);
  pdf.save("download.pdf");
}

一个完整的jsfiddle的链接在这里:https:/jsfiddle.neteo8u073m

我不知道为什么它不能工作，因为其他类似的例子也有这样的代码。如果有任何帮助，我将感激不尽。

Answer 1

ApexChart 在我们的dom中是以HTML的形式呈现的，而在你的例子中，你试图通过使用 addImage 到 JSPDF (你可以在你的控制台中看到因为没有传递图像而引发这个错误)

您可以通过 html 使用 addHTML() 或从 apexChart 并按下图所示传递。

function demoFromHTML() {
  chart.dataURI().then(({ imgURI, blob }) => {
    var pdf = new jsPDF();
    pdf.addImage(imgURI, 'PNG', 0, 0);
    pdf.save("download.pdf");
  })
} 

工作实例 https:/jsfiddle.netp9x52vtb