JSPDF возвращает ошибку скрипта для создания PDF с диаграммой ApexCharts

Я пытаюсь создать загружаемый PDF-файл диаграммы, созданной с помощью ApexCharts. На данный момент я только что заполнил его фиктивными данными и пытаюсь заставить работать опцию загрузки 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.net/eo8u073m/

Я не уверен, почему он не работает, поскольку другие похожие примеры работали с таким кодом. Любая помощь будет оценена по достоинству.


javascript jspdf apexcharts
person Yohan    schedule 05.06.2020    source источник
comment
Глядя на ошибку, проблема в том, что ваша диаграмма не является изображением, вы можете использовать addHTML вместо addImage из jspdf.   -  person noitse    schedule 05.06.2020
comment
Или используя извлечение изображения из apexChart с помощью dataUri, а затем передачу его в jspdf, как показано здесь   -  person noitse    schedule 05.06.2020
comment
@noitse Используется dataURI, теперь он отображает диаграмму с правильной осью, но фактических столбцов там нет. Это должно быть видно на скрипке   -  person Yohan    schedule 05.06.2020
comment
Это связано с тем, что он был вызван перед рендерингом фактических данных. Попробуйте это jsfiddle.net/p9x52vtb   -  person noitse    schedule 05.06.2020
comment
Отлично, спасибо за помощь   -  person Yohan    schedule 05.06.2020
comment
Я резюмирую это в ответе ниже.   -  person noitse    schedule 05.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

ApexChart отображается как HTML в нашем dom, в вашем примере вы пытаетесь передать его, используя 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.net/p9x52vtb/

person noitse    schedule 05.06.2020