Как получить полное изображение из div, содержащего amchart4, и преобразовать в PDF для загрузки?

#javascript #amcharts #jspdf #html2canvas #amcharts4

#javascript #amcharts #jspdf #html2canvas #amcharts4

Вопрос:

Я пытаюсь преобразовать div, содержащий amcharts4, в изображения, поместить его в PDF и загрузить.

Но когда оно сохраняется в формате PDF, amcharts4 обрезается, как на картинках

введите описание изображения здесь

это фактический div

введите описание изображения здесь

примечание: даже несмотря на то, что я использую шаблон metronic, я не использую amcharts4 из шаблона metronic

это мой код при срабатывании кнопки печати

 const filename  = 'ThisIsYourPDFFilename.pdf';

        html2canvas(document.querySelector('.m-content')).then(canvas => {
            let pdf = new jsPDF();
            pdf.addImage(canvas.toDataURL('image/png'), 'JPEG', 0, 0, 211, 298);
            pdf.save(filename);
        });
  

и это внешний скрипт, который я включил

 <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
  

есть предложения?

Ответ №1:

amCharts имеют собственную встроенную функцию экспорта диаграмм в PDF. Пожалуйста, ознакомьтесь с основами здесь.

В один и тот же PDF-файл можно добавить несколько диаграмм, как показано здесь.

Теперь, если вам действительно нужно использовать html2canvas , вы, вероятно, все равно сможете получить изображение с помощью функции экспорта, а затем добавить изображение Base64 в свой файл:

 var imgData = chart.exporting.getImage("png");