JSPDF 返回使用 ApexCharts 图表创建 PDF 的脚本错误

Question

我正在尝试为我使用 ApexCharts 生成的图表创建可下载的 PDF。目前，我刚刚用虚拟数据填充了它，并试图让下载 PDF 选项起作用。但是，当我尝试运行它时，它 returns 控制台中出现脚本错误。这是我的 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 link 在这里： https://jsfiddle.net/eo8u073m/

我不确定为什么它不能正常工作，因为其他类似的示例已经使用了这样的代码。任何帮助将不胜感激。

Answer 1

ApexChart 在我们的 dom 中呈现为 HTML，在您的示例中，您试图通过使用 addImage 将其传递到 JSPDF（您可以在控制台中看到因未传递图像而引发此错误）

您可以使用 addHTML() 传递 html 或从 apexChart 导出图像并传递，如下所示。

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

工作示例https://jsfiddle.net/p9x52vtb/

JSPDF 返回使用 ApexCharts 图表创建 PDF 的脚本错误

JSPDF returning script error for creating PDF with ApexCharts chart

javascript

jspdf

apexcharts