製品版のみの機能
スプレッドシート - Excel ファイルからデータをインポート
このサンプルでは、igSpreadsheet コントロールで Excel ファイルを読み込んで表示する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
- サンプル Excel ファイルのダウンロード
- [ファイルを選択]/[参照...] ボタンをクリックして、サンプル Excel ファイルを選択します。
- Excel コンテンツを編集または編集の無効化
- Excel ファイルをダウンロード
ファイルを選択...
Excel の編集を有効にする
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
File API を使用して、Excel ファイルが Uint8Array オブジェクトに読み込まれ、このオブジェクトが Excel ライブラリに公開される load メソッドに渡されます。ワークブックが取得され、igSpreadsheet コントロールが初期化された後、ワークブックはコントロールのオプションによって表示されます。その後、スプレッドシートのコンテンツを編集して Excel ファイルに保存します。
コード ビュー
クリップボードへコピー
<!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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>サンプル <a href="/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" />
<span> ファイルを選択... </span>
</div>
<div>
<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="ワークブックを保存" onclick="saveWorkbook()">
</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 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("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: : ' + error);
});
}
</script>
</body>
</html>