Export any Chart, any table and any content into Image In Angular2 Project

Question

I am working on Angular2 Project in which I've implemented below things in my project:

• jQxGrid (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm)
• Angular Table
• nvd3 boxplot chart (https://nvd3-community.github.io/nvd3/)
• jQxDonut chart (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_donut_series.htm)

I would like to implement common code which can export HTML / div / table / any chart into PNG/JPEG.

Is there any easiest way to implement export functionality in Angular 2?

I have seen below links and tried to implement it but no luck.

https://github.com/tsayen/dom-to-image#usage

Render HTML to an image

https://www.aspsnippets.com/Articles/Convert-Export-HTML-DIV-or-Table-to-Image-using-HTML-Canvas-in-ASPNet-using-C-and-VBNet.aspx

https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/

Answer 1

You can use html2canvas library it will allow you to save any DOM portion as a Canvas:

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.

Here's an example of how would be your code:

html2canvas($("#widget"), {
  onrendered: function(canvas) {
    $("#img-out").html("");
    theCanvas = canvas;
    document.body.appendChild(canvas);
    $("#img-out").append(canvas);
  }
});

This is a demo Fiddle.

You can find more examples in html2canvas website.