JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
<a href="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" class="embed" style="text-align : center; display : block;"></a>       
      </div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Download</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

JavaScript

(function($){
	$.fn.gdocsViewer = function(options) {
	
		var settings = {
			width  : '400',
			height : '600'
		};
		
		if (options) { 
			$.extend(settings, options);
		}
		
		return this.each(function() {
			var file = $(this).attr('href');
            // int SCHEMA = 2, DOMAIN = 3, PORT = 5, PATH = 6, FILE = 8, QUERYSTRING = 9, HASH = 12
			var extregex = /^((http[s]?|ftp):\/)?\/?([^:\/\s]+)(:([^\/]*))?((\/[\w/-]+)*\/)([\w\-\.]+[^#?\s]+)(\?([^#]*))?(#(.*))?$/i;
			var ext = file.match(extregex)[8].split(".").pop();
            console.log("Extension : "+ext);
			if (/^(tiff|pdf|ppt|pps|doc|docx|txt)$/.test(ext)) {
				$(this).after(function () {
					var id = $(this).attr('id');
					var gdvId = (typeof id !== 'undefined' && id !== false) ? id + '-gdocsviewer' : '';
					return '<div id="' + gdvId + '" class="gdocsviewer"><iframe src="http://docs.google.com/viewer?embedded=true&url=' + encodeURIComponent(file) + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;margin : 0 auto; display : block;"></iframe></div>';
				})
			}
		});
	};
})( jQuery );

/*<![CDATA[*/
$(document).ready(function () {
    $('a.embed').gdocsViewer({
        width: 540,
        height: 700
    });
    $('#embedURL').gdocsViewer();
});
/*]]>*/