Available in the Full Version

Spreadsheet - Import Data From Excel File

This sample demonstrates how to load an Excel file and display it via igSpreadsheet control.
  1. Download this sample Excel file
  2. Click Choose File/Browse button below and pick the sample Excel file or another excel file.
  3. Edit excel content or disable editing
  4. Download excel file
Choose a file...
Enable excel editing
Wj
Sheet1
Sheet1

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Using File API, the Excel file is read into Uint8Array object, which is then passed to the load method exposed by the Excel library. Once the workbook is obtained and igSpreadsheet control is initilized, the workbook is set to be displayed via the control's options. Then you can edit the spreadsheet content and save it back to excel file.

Code View

Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Import Data From Excel File</title>

	<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.excel-bundled.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.spreadsheet-bundled.js"></script>

	<!-- saving worksheet -->
	<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>

	<style>
        .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;
		}

	</style>
</head>
<body>

	<div>
		<ol>
			<li>Download this <a href="/HtmlSamples/javascript-excel-library/report.xlsx" download>sample  Excel file</a></li>
			<li>Click Choose File/Browse button below and pick the sample Excel file or another excel file.</li>
			<li>Edit excel content or disable editing</li>
			<li>Download excel file</li>
		</ol>
        <div class="spreadsheet-sample-btn">
            <input type="file" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            <span> Choose a file... </span>
        </div>
		<div>
			<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="Save Workbook" onclick="saveWorkbook()">
		</div>
		<div class="editing-controls-container">
			<span for="enableEditing" class="show-row-text">
				<div id="enableEditing"></div>
				<span class="label-editing">Enable excel editing</span>
			</span>
		</div>
		<div class="clear"></div>
		
		<div id="result"></div>
		<div id="spreadsheet"></div>
	</div>
	<script>
		$(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("The excel file is corrupted.");
							$("#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("The format of the file you have selected is not supported. Please select a valid Excel file ('.xls, *.xlsx').");
							$("#result").show(1000);
						}
					}
				})
			} else {
				$("#result").text("The File APIs are not fully supported in this browser.");
				$("#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: : ' + error);
				});
		}

	</script>
</body>
</html>