Spread.Sheets
クライアント側でのExcelファイルのインポートおよびエクスポート
Spread.Sheets > 開発者の手引き > データの管理 > クライアント側でのExcelファイルのインポートおよびエクスポート

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

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

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

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

次の表は、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
コードのコピー 
<!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>

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.