javascript - 将图表下载为图像

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 的按钮，它会将小部件 div 转换为 Canvas 元素，然后使用 saveAs() FileSaver 接口(interface)(在 native 不支持的浏览器中通过 FileSaver.js)将 div 保存为名为“Image.png”的图像。

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

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