SpreadJS Vue コンポーネントの使い方

以下の簡単な手順で、ExcelライクなスプレッドシートをVueアプリケーションに組み込みます。その後、ビジネスの必要性に応じてカスタマイズすることができます。

手順

  1. Vueアプリケーションを作成します。 - コマンドプロンプトウィンドウを開き、以下のコマンドを入力して、簡単なVueプロジェクトを作成します。終了すると、ディレクトリの指定された場所にVueプロジェクトが作成されます。Vueプロジェクトの作成方法については、Vue クイックスタートサイトを参照してください。
    npm init vue@latest // project name: sjs-vue-app
    cd sjs-vue-app
  2. SpreadJSのnpmパッケージをインストールします。 - SpreadJSのVueコンポーネントは、@mescius/spread-sheets-vue のnpmパッケージで配布しています。メインの @mescius/spread-sheets パッケージは、コア機能を提供しています。 これらのパッケージをインストールするには、アプリケーションのルートフォルダーから次のコマンドを実行します。
    npm install @mescius/spread-sheets-vue@xx.x.x
    npm install @mescius/spread-sheets@xx.x.x
    
    // 日本語リソースをインストールします。
    npm install @mescius/spread-sheets-resources-ja@xx.x.x

    'xx.x.x'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

  3. SpreadJS Vueコンポーネントをアプリケーションに追加し、スプレッドシートを初期化します。
    main.js ファイルを開き、内容を以下のコードに変更します。
    import { createApp } from 'vue'
    import App from './App.vue'
    import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
    import './assets/main.css'
    
    let app = createApp(App);
    app.component('gc-spread-sheets', GcSpreadSheets);
    app.component('gc-worksheet', GcWorksheet);
    app.component('gc-column', GcColumn);
    app.mount("#app");
    App.vue ファイルを開き、内容を以下のコードに変更します。
    <template>
        <div id="spread-host">	
            <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
            </gc-spread-sheets>
        </div>
    </template>
       
    <script setup>
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
    import * as GC from '@mescius/spread-sheets';
    import '@mescius/spread-sheets-resources-ja';
    // 日本語カルチャを設定します
    GC.Spread.Common.CultureManager.culture('ja-jp');
    
    function initWorkbook(spread) {
      let sheet = spread.getActiveSheet();
      sheet
        .getCell(0, 0)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .value("こんにちは SpreadJS!");
    }
    </script>
    <style>
    .spreadHost  {
       width: 800px;
       height: 800px;
     }
    </style>
    
  4. アプリケーションを実行します。 - ターミナルで以下のコマンドを入力し、アプリケーションを実行します。
    npm run dev

値と数式の設定

手順

  1. setValueメソッドを使用してセルの値を設定します。また、setFormulaメソッドで計算式を作成します。
    function initWorkbook (spread) {
        var sheet = spread.getSheet(0);
        // テキストを設定します。
        sheet.setText(0,0,"テキスト");
        // 数値を設定します。
        sheet.setValue(1, 0, 2245);
        sheet.setValue(2, 0, 345);
        // 日付型の値を設定します。
        sheet.setValue(3, 0, new Date());
        sheet.getRange(3, 0, 1, 1).formatter('[$-411]ggg ee"年"mm"月"dd"日"');
    
        // 数式を設定します。(A2とA3セルの合計を計算します。)
        sheet.setFormula(3, 3, '=SUM(A2:A3)');
    
        // 列幅を設定します。
        sheet.setColumnWidth(0, 150);
    }

スタイルの設定

以下の機能を使って、データをより分かりやすく表現しましょう。

手順

  1. このステップでは、シートのスタイルを設定してデータを見やすく表現します。
    function initWorkbook (spread) {
        // スタイルを設定します。
        sheet.setColumnWidth(1, 200);
        sheet.setColumnWidth(2, 200);
        sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
        sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
        sheet.addSpan(1, 1, 1, 2);
        sheet.getRange(1, 1, 6, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
            all: true
        });
        sheet.getRange(2, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
            inside: true
       });
       sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

データ連結

以下のように、データを簡単かつ効率的に連結することができます。

手順

  1. getSheet メソッドを使用して、データ連結を設定するシートを取得します。
  2. セルに連結するデータソースを "new GC.Spread.Sheets.Bindings.CellBindingSource(person); "で作成します。
  3. setBindPath メソッドを使用して、指定されたシート領域の指定されたセルのバインディングパスを設定します。
  4. setDataSource メソッドを使用して、シートのデータソースを設定します。
    function initWorkbook (spread) {
        var sheet = spread.getSheet(0);
        var person = { name: '紫 太郎', age: 25, gender: '男性', address: { postcode: '981-3205' } };
        var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
        sheet.setBindingPath(2, 2, 'name');
        sheet.setBindingPath(3, 2, 'age');
        sheet.setBindingPath(4, 2, 'gender');
        sheet.setBindingPath(5, 2, 'address.postcode');
        sheet.setDataSource(source);
    }