Spread.Sheets > 開発者の手引き > データの管理 > クライアント側でのExcelファイルのインポートおよびエクスポート |
クライアント側でインポートおよびエクスポートメソッドを使用すると、Excelファイル(.xlsx)をJSONにインポートしたり、JSONオブジェクトをExcelにエクスポートしたりできます。
saveメソッドで生成したExcel形式ファイルの状態は、ダウンロードによって読み取り専用となります。これはインターネットを経由してダウンロードされるファイルに対してウェブブラウザがZone.Identifier情報を自動的に付与した影響です。Microsoft ExcelはZone.Identifier情報を検知し、Excel形式ファイルの初回オープン時に警告メッセージを表示します。 |
Excelファイルをローカルにダウンロードすることも、返されたExcelファイル(BLOB型)を取得し、サーバーに送信することもできます。
Excelのインポートおよびエクスポートに使用できるメソッドは、次のとおりです。
次の表は、Excelファイルにインポートまたはエクスポートできる機能を示します。
機能 | 説明 | インポート(excelをjsonに) | エクスポート (jsonをexcelに) |
---|---|---|---|
ワークブック |
tabstrip:
|
√ | √ |
スクロールバー:
|
√ | √ | |
シート: |
√ | √ | |
参考スタイル: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 |
コードのコピー
|
---|---|
<!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> |