如何从 div 中获取包含 amchart4 的完整图像并转换为 pdf 以供下载？

Question

我正在尝试将包含 amcharts4 的 div 转换为图像并将其转换为 pdf 并下载。

但是保存为pdf时，amcharts4被裁剪了，如图

这是真实的div

nb：即使我使用的是 metronic 模板，我也没有使用 metronic 模板中的 amcharts4

这是我触发打印按钮时的代码

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>

有什么建议吗？

Answer 1

amCharts 有自己的内置图表到 PDF 导出功能。请check the basics here.

可以将多个图表添加到与 shown here 相同的 PDF 文件中。

现在，如果您确实需要使用 html2canvas，您仍然可以使用导出功能获取图像，然后将 Base64 图像添加到您的文件中：

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

如何从 div 中获取包含 amchart4 的完整图像并转换为 pdf 以供下载？

How to get full image from div that containing amchart4 and convert into pdf to be downloaded?

javascript

amcharts

html2canvas

jspdf

amcharts4