如何从包含amchart4的div获取完整图像并转换为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");