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に)

ワークブック
(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>

 

 


© 2016-2018, GrapeCity inc. All rights reserved.