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

【问题标题】：How can I get a URI from ApexCharts to download in PDF?如何从 ApexCharts 获取 URI 以下载 PDF？
【发布时间】：2020-01-13 11:36:38
【问题描述】：

我已经实现了 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 格式，但它不起作用。

【问题讨论】：

将代码重新格式化为代码块。尽可能多地更改和更正文本。
Léa Gris 现在已更正图表已创建，但下载时获取 uri 时出现错误
我没有更改您的代码功能，只是重新格式化了您的问题，使其更易于理解，并让您有更多机会获得 PDF 输出方面的帮助。
Léa Gris 是的，我删除了一些用于创建图表的代码，因为它被创建了两次请帮助我解决这个错误，我无法获取接收此错误图表的图表的 uri。 dataURI 不是函数
谁能帮我解决这个问题

标签： javascript pdf-generation jspdf apexcharts

【解决方案1】：

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

render 函数返回一个承诺，因此您可以在它的 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 demo

【讨论】：

是的，它通过虚拟数据的工作方式与您在 codepen 演示中所做的相同我谢谢
谢谢，亲爱的，它对我有用，我的答案很有用，但我没有 50 个声誉，这就是答案计数不增加的原因