CODEWITHSUNDEEP
javascriptjspdfapexcharts
Yohan
Yohan

Reputation: 409

JSPDF returning script error for creating PDF with ApexCharts chart

I am trying to create a downloadable PDF of a chart I generate using ApexCharts. At the moment, I have just filled it with dummy data and am trying to get the download PDF option to work. However, when I try to run it, it returns a Script Error in the console. Here is my 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");
}

A link to the full jsfiddle is here: https://jsfiddle.net/eo8u073m/

I'm not sure why it isnt working as other, similar examples have worked with code like this. Any help will be appreciated.

Upvotes: 0

Views: 1982

Answers (1)

noitse
noitse

Reputation: 1045

ApexChart is being rendered as HTML in our dom, in your example you are trying to pass it through using addImage to JSPDF (You can see in your console raising this error for not passing image)

You can either pass html using addHTML() or export image from apexChart and pass that as shown bellow. 

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

Working example https://jsfiddle.net/p9x52vtb/

Upvotes: 1

Related Questions