JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.spreadsheet-bundled.js"></script>
<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div>
		<ol>
			<li>サンプル <a href="https://jp.igniteui.com/HtmlSamples/javascript-excel-library/report.xlsx" download="">Excel ファイルのダウンロード</a></li>
			<li>[ファイルを選択]/[参照...] ボタンをクリックして、サンプル Excel ファイルを選択します。</li>
			<li>Excel コンテンツを編集または編集の無効化</li>
			<li>Excel ファイルをダウンロード</li>
		</ol>
        <div class="spreadsheet-sample-btn">
            <input type="file" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></input>
            <span> ファイルを選択... </span>
        </div>
		<div>
			<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="ワークブックを保存" onclick="saveWorkbook()">
		</input></div>
		<div class="editing-controls-container">
			<span for="enableEditing" class="show-row-text">
				<div id="enableEditing"></div>
				<span class="label-editing">Excel の編集を有効にする</span>
			</span>
		</div>
		<div class="clear"></div>
		
		<div id="result"></div>
		<div...

CSS

.ui-igspreadsheet .ui-menu-item {
            white-space:nowrap;
        }

		#sampleContainer ol {
			padding: 0px 0px 0px 15px;
			margin: 0;
		}

         #sampleContainer ol li{
			margin-bottom: 10px;
		}

        #sampleContainer ol li:last-of-type {
			margin: 0;
		}

		#result {
			display: none;
			color: red;
		}

        .spreadsheet-sample-btn
        {
			position: relative;
			float: left;
            max-width: 200px;
            padding: 8px;
            background: #fff;
            color:#444;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            text-transform: uppercase;
            margin:15px 15px 15px 0;
            border:1px solid #ccc;
            overflow:hidden;
        }

        .spreadsheet-sample-btn:hover {
            border-color:#09f;
        }

        #input {
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

		.clear {
			clear: both;
		}

		#saveWorkbookBtn {
			padding: 7px;
		}

		.editing-controls-container {
			position: relative;
			min-width: 200px;
			float: left;
			margin: 15px;
		}

			.editing-controls-container #enableEditing {
				margin-right: 6px;
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 10px;
			}

		.label-editing {
			display:inline-block;
			position: absolute;
			left: 23px;
			top: 15px;
		}

JavaScript

$(function () {
			var editingEnabled = true;
			$("#spreadsheet").igSpreadsheet({
				height: "600",
				width: "100%",
				isFormulaBarVisible: true,
				editModeEntering: function (e, args) {
					return editingEnabled;
				}
			});

			$("#enableEditing").igCheckboxEditor({
				checked: true,
				valueChanged: function (evt, ui) {
					editingEnabled = ui.newState;
				}
			});

			//Check for Browser's - File API support
			if (window.FileReader) {
				$("#input").on("change", function () {
					var excelFile,
						fileReader = new FileReader();

					$("#result").hide();

					fileReader.onload = function (e) {
						var buffer = new Uint8Array(fileReader.result);

						$.ig.excel.Workbook.load(buffer, function () {
							workbook = arguments[0];
							setWorkbook();

						}, function (error) {
							$("#result").text("Excel ファイルは破損しています。");
							$("#result").show(1000);
						});
					}

					if (this.files.length > 0) {
						excelFile = this.files[0];
						if (excelFile.type === "application/vnd.ms-excel" || excelFile.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || (excelFile.type === "" && (excelFile.name.endsWith("xls") || excelFile.name.endsWith("xlsx")))) {
							fileReader.readAsArrayBuffer(excelFile);
						} else {
							$("#result").text("選択のファイル形式がサポートされていません。有効な Excel ファイルを選択してください ('.xls, *.xlsx')。");
							$("#result").show(1000);
						}
					}
				})
			} else {
				$("#result").text("File API はこのブラウザーで完全にはサポートされていません。");
				$("#result").show(1000);
			}
		});

		function setWorkbook() {
			if ($("#spreadsheet").igSpreadsheet !== undefined && workbook != null) {
				//load specific workbook
				$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
			}
		}

		function saveWorkbook(workbook, name) {
			$("#spreadsheet").igSpreadsheet("option", "workbook")
				.save({ type: 'blob' }, function (data) {
					saveAs(data, name);
				}, function (error) {
					alert('Error exporting: : ' +...