下载图表作为图像

Question

我有一张JavaScript图表。我想以各种格式下载，例如。png,jpg,jpeg,pdf 等。
如何在客户端进行？因为我不想加载我的服务器的处理能力。
谢谢

Answer 1

我认为您可以制作用于显示图表并让用户下载图表的div或HTML标签的屏幕截图。

使用html2canvas和FileSaver.js

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                canvas.toBlob(function(blob) {
                    saveAs(blob, "Image.png"); 
                });
            }
        });
    });
});

按下id为btnSave的按钮后，它会将widget div转换为canvas元素，然后使用saveAs（）FileSaver界面（通过不支持本机的浏览器中的FileSaver.js）来保存div作为名为＆＃34; Image.png＆＃34;。

的图像

FileSaver.js可能无法在所有浏览器上正常运行。有些可能无法自动启动下载，其他人可能会在其他选项卡中显示图像。但我仍然认为这是一个很好的解决方案。

如果图表已经是画布，那么您不需要将其转换为画布并忽略html2canvas部分。