Vue | クイックスタート | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

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

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

手順

Vueアプリケーションを作成します。
- コマンドプロンプトウィンドウを開き、以下のコマンドを入力して、簡単なVueプロジェクトを作成します。終了すると、ディレクトリの指定された場所にVueプロジェクトが作成されます。Vueプロジェクトの作成方法については、Vue クイックスタートサイトを参照してください。
```
npm init vue@latest // project name: sjs-vue-app
cd sjs-vue-app
```
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'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

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>

アプリケーションを実行します。
- ターミナルで以下のコマンドを入力し、アプリケーションを実行します。
```
npm run dev
```

値と数式の設定

手順

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);
}

スタイルの設定

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

手順

このステップでは、シートのスタイルを設定してデータを見やすく表現します。

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);
}

データ連結

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

手順

getSheet メソッドを使用して、データ連結を設定するシートを取得します。
セルに連結するデータソースを "new GC.Spread.Sheets.Bindings.CellBindingSource(person); "で作成します。
setBindPath メソッドを使用して、指定されたシート領域の指定されたセルのバインディングパスを設定します。

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);
}