JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="file:///C:/KEPCO_DEV/websquare/workspace/DEA_WEB/WebContent/js/ol-debug.js"></script>
<link rel="stylesheet" href="file:///C:/KEPCO_DEV/websquare/workspace/DEA_WEB/WebContent/css/ol.css">
<title>Export map example</title>
<body>
    <div id="map">
        <a id="export-png" class="btn" download="map.png">Export PNG</a>
    </div>
</body>

CSS

#map { width: 100%; height: 100%; position: absolute;}
#export-png{ position: absolute; top: 10px; right: 50px; z-index: 1000; background-color: rgba(255,255,255,0.6);}

JavaScript

// create map with test layer
var map = new ol.Map({
  layers: [scwin.vworldLayer],
	renderer: 'canvas',
	target: 'map',
  interactions: ol.interaction.defaults({doubleClickZoom : true, dragPan: true}),
    view: new ol.View({
	        center: ol.proj.transform([127.87, 35.857], 'EPSG:4326', 'EPSG:3857'),
	        zoom: 7,
	        minZoom: 7,
	        maxZoom: 22
    })
});

var vworldSource = new ol.source.XYZ({
        tileUrlFunction: function(tileCoord) {
         
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2]; //(1 << z) - tileCoord[2] - 1;
         
         
          if (x < 0 || y < 0) {
            return "";
          }

          var url = "http://192.168.0.211:8080/vworld/" + z+'/'+ x +'/'+ y +'.png';

          return url;
        },
        minResolution: 0.5,
	  maxResolution: 3000,
          maxZoom:18,
      wrapx: false
 });
 
 		var layer = new ol.layer.Tile({
			extent:[-20037508.342789244, -20007508.342789244, 20037508.342789244, 20037508.342789244],
		    source: vworldSource,
		    name: 'vworldLayer',
		    crossOrigin: 'anonymous',
	  	    //minResolution: 0.5,
            maxResolution: 3000
		});
                
map.addLayer(layer);

// now add behavior to export the map
var exportPNGElement = document.getElementById('export-png');

if ('download' in exportPNGElement) {
  exportPNGElement.addEventListener('click', function(e) {
    map.once('postcompose', function(event) {
      var canvas = event.context.canvas;
      exportPNGElement.href = canvas.toDataURL('image/png');
    });
    map.renderSync();
  }, false);
} else {
  var info = document.getElementById('no-download');
  /**
   * display error message
   */
  info.style.display = '';
}