クライアント側でのExcelファイルのインポートおよびエクスポート

クライアント側でインポートおよびエクスポートメソッドを使用すると、Excelファイル（.xlsx）をJSONにインポートしたり、JSONオブジェクトをExcelにエクスポートしたりできます。

saveメソッドで生成したExcel形式ファイルの状態は、ダウンロードによって読み取り専用となります。これはインターネットを経由してダウンロードされるファイルに対してウェブブラウザがZone.Identifier情報を自動的に付与した影響です。Microsoft ExcelはZone.Identifier情報を検知し、Excel形式ファイルの初回オープン時に警告メッセージを表示します。

Excelファイルをローカルにダウンロードすることも、返されたExcelファイル（BLOB型）を取得し、サーバーに送信することもできます。

Excelのインポートおよびエクスポートに使用できるメソッドは、次のとおりです。

open
save

次の表は、Excelファイルにインポートまたはエクスポートできる機能を示します。

機能	説明	インポート（excelをjsonに）	エクスポート（jsonをexcelに）
ワークブック（spread）	tabstrip: tabStripVisible, startSheetIndex, tabStripRatio, tabColor	√	√
	スクロールバー： showHorizontalScrollbar, showVerticalScrollbar	√	√
	シート: シートの名前、シートの表示/非表示設定	√	√
	参考スタイル：R1C1またはA1	√	√
	カスタム名	√	√
共有の文字列	データシートに使用された文字列（共通の文字列、空白文字列	√	√
テーマ	カラースキーム	√	√
	フォントスキーム（ Spread.Sheetsには詳細なフォントがありません）	√	√
	フォーマットスキーム（Spread.Sheetsにはフォーマットスキームがありません）	X	√
スタイル	cellStyles：Spread.Sheetsがサポートされているすべてのスタイル	√	√
	さまざまな形式（テーブルに使用される形式、条件付き形式またはフィルタ）	√	√
	tableStyles	√	√
ワークシート	rowRangeGroup、colRangeGroup	√	√
	rowCount と columnCount	√	√
	グリッドライン表示/非表示設定、グリッドラインの色	√	√
	列ヘッダ/行ヘッダの表示/非表示設定	√	√
	ズーム	√	√
	選択	√	√
	activeRow、 activeColumn	√	√
	行・列の固定 (frozenRowCount, frozenColumnCount)	√	√
	デフォルトのrowHeightまたはcolumnWidth	√	√
	columnInfo：列の幅、表示/非表示、スタイル設定	√	√
	セル結合	√	√
	シートの保護の状態	√	√
	rowInfo: 行の高さ、表示/非表示、スタイル設定	√	√
	cellInfo：セルの値、数式、スタイル、結合設定	√	√
	カスタム名	√	√
	条件付き形式	√	√
	コメント	√	√
	画像	√	√
	スライサー	√	√
	スパークライン	√	√
	テーブル	√	√
	フィルタ	√	√
	検証	√	√
	アウトライン	√	√
	印刷	√	√

コードの使用

次のサンプルコードは、Excelファイルを開き、保存します。コードの最初の部分は、クライアント側のインポートおよびエクスポートの依存関係のファイルを示します。

JavaScript	コードのコピー
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <link href="./css/gc.spread.sheets.excel2013white.x.xx.xxxx.x.css" rel="stylesheet"/> <script src="./scripts/gc.spread.sheets.all.x.xx.xxxx.x.min.js" type="application/javascript"></script> <!--For client-side excel i/o--> <script src="./scripts/interop/gc.spread.excelio.xx.x.x.min.js"></script>

JavaScript

コードのコピー

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <link href="./css/gc.spread.sheets.excel2013white.x.xx.xxxx.x.css" rel="stylesheet"/>
    <script src="./scripts/gc.spread.sheets.all.x.xx.xxxx.x.min.js" type="application/javascript"></script>
    <!--For client-side excel i/o-->
    <script src="./scripts/interop/gc.spread.excelio.xx.x.x.min.js"></script>

JavaScript	コードのコピー
<!DOCTYPE html> <html lang="en"> <head> <title>SpreadJS Client Side ExcelIO</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <link href="./css/gc.spread.sheets.excel2013white.xx.x.x.css" rel="stylesheet"/> <script src="./scripts/gc.spread.sheets.all.xx.x.x.min.js" type="application/javascript"></script> <!--For client-side excel i/o--> <script src="./scripts/interop/gc.spread.excelio.xx.x.x.min.js"></script> </head> <body> <div> <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls"/> <input type="button" id="loadExcel" value="Import" onclick="ImportFile()"/> <input type="button" class="btn btn-default" id="saveExcel" value="Export" onclick="ExportFile()"/> <input type="text" id="exportFileName" placeholder="Export file name" class="form-control" value="export.xlsx"/> <div id="ss" style="width:100%;height:500px"></div> </div> </div> </body> <script> window.onload = function () { workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); excelIO = new GC.Spread.Excel.IO(); } function ImportFile() { var excelFile = document.getElementById("fileDemo").files[0]; excelIO.open(excelFile, function (json) { var workbookObj = JSON.parse(json); workbook.fromJSON(workbookObj); }, function (e) { console.log(e); }); } function ExportFile() { var fileName = document.getElementById("exportFileName").value; if (fileName.substr(-5, 5) !== '.xlsx') { fileName += '.xlsx'; } var json = JSON.stringify(workbook.toJSON()); excelIO.save(json, function (blob) { saveAs(blob, fileName); }, function (e) { console.log(e); }); } </script> </html>

JavaScript

コードのコピー

<!DOCTYPE html>
 <html lang="en">
 <head>
     <title>SpreadJS Client Side ExcelIO</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
     <link href="./css/gc.spread.sheets.excel2013white.xx.x.x.css" rel="stylesheet"/>
     <script src="./scripts/gc.spread.sheets.all.xx.x.x.min.js" type="application/javascript"></script>
     <!--For client-side excel i/o-->
     <script src="./scripts/interop/gc.spread.excelio.xx.x.x.min.js"></script>
 </head>
 <body>
 <div>
     <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls"/>
     <input type="button" id="loadExcel" value="Import" onclick="ImportFile()"/>  
     <input type="button" class="btn btn-default" id="saveExcel" value="Export" onclick="ExportFile()"/>
 <input type="text" id="exportFileName" placeholder="Export file name" class="form-control" value="export.xlsx"/>
     <div id="ss" style="width:100%;height:500px"></div>
 </div>
 </div>
 </body>
 <script>
    window.onload = function () {
        workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        excelIO = new GC.Spread.Excel.IO();
     }
    function ImportFile() {
         var excelFile = document.getElementById("fileDemo").files[0];
         excelIO.open(excelFile, function (json) {
             var workbookObj = JSON.parse(json);
            workbook.fromJSON(workbookObj);
         }, function (e) {
             console.log(e);
         });
     }
    function ExportFile() {
         var fileName = document.getElementById("exportFileName").value;
         if (fileName.substr(-5, 5) !== '.xlsx') {
             fileName += '.xlsx';
         }
         var json = JSON.stringify(workbook.toJSON());
         excelIO.save(json, function (blob) {
             saveAs(blob, fileName);
         }, function (e) {
             console.log(e);
         });
     }
 </script>
 </html>