将图表下载为图片

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元素，然后使用另存为（）通过FileSaver.js FileSaver接口（在浏览器的本机不支持）将div保存为名为“Image.png”的图像。

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

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