<!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>
