Demo - FlexGrid to Image

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid to Image
  </h1>
  <p>
    This example uses the dom to image library to export a FlexGrid
    as a png image.</p>
  <p>
    It does not work if the grid's scroll position is not at the 
    origin.</p>
  <div id="theGrid">
  </div>
  <button id="theButton">
    Export Grid to Image
  </button>
    
</div>

CSS

.wj-flexgrid {
  max-height: 350px;
  margin-bottom: 12px;
}
body {
  margin-bottom: 36pt;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // create grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data
  });
  
	// export grid
  document.getElementById('theButton').addEventListener('click', function(e) {
  
  	// scroll grid to origin
  	theGrid.scrollPosition = new wijmo.Point(0, 0);
    
    // render to image
    setTimeout(function() {
			domtoimage.toPng(theGrid.hostElement)
  	  	.then(function(dataUrl) {
    			console.log(dataUrl);
      		//window.open(dataUrl);
	      	var img = new Image();
	      	img.src = dataUrl;
	      	document.body.appendChild(img);
	    	})
	    	.catch(function(error) {
		      console.error('oops, something went wrong!', error);
		    });  
    }, 50)
  })
}


// https://ourcodeworld.com/articles/read/38/how-to-capture-an-image-from-a-dom-element-with-javascript
/*! dom-to-image 03-02-2016 */
!function(a){"use strict";function b(a,b){return b=b||{},Promise.resolve(a).then(function(a){return e(a,b.filter)}).then(f).then(g).then(function(a){return b.bgcolor&&(a.style.backgroundColor=b.bgcolor),a}).then(function(b){return h(b,a.scrollWidth,a.scrollHeight)})}function c(a,b){return i(a,b||{}).then(function(a){return a.toDataURL()})}function d(a,b){return i(a,b||{}).then(n.canvasToBlob)}function e(b,c){function d(a){return a instanceof HTMLCanvasElement?n.makeImage(a.toDataURL()):a.cloneNode(!1)}function f(a,b,c){function d(a,b,c){var d=Promise.resolve();return b.forEach(function(b){d=d.then(function(){return e(b,c)}).then(function(b){b&&a.appendChild(b)})}),d}var f=a.childNodes;return...