SpreadJS製品ヘルプ
Vue.js
JavaScriptフレームワーク > Vue.js

SpreadJSでは、JavaScriptライブラリの1つであるVue.jsがサポートされます。Vue.jsは、開発者に複雑なユーザーインターフェイスおよびWebアプリケーションを構築するためにツールを提供します。

SpreadJSでは、次の2つの方法でVue.jsを使用できます。

Npmパッケージを使用してVue3とVue2を実装する

次の手順を実行します。

  1. Vue.jsプロジェクトを作成する

    コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

    コマンドプロンプト
    コードのコピー 
    npm install -g @vue/cli
vue create spreadjs-quickstart :: Here, select Vue 3.
cd spreadjs-quickstart
npm run serve

    コマンドを実行すると、ディレクトリ内の指定の場所にVue.jsプロジェクトが作成されます。Vue.jsプロジェクトの作成方法については、https://v3.vuejs.org/guide/installation.htmlを参照してください。

  2. Spread.Sheets Vue.jsモジュールをインストールする

    Spread.Sheets Vue.jsモジュール、および日本語リソースを、npmからインストールします。

    コマンドプロンプト
    コードのコピー 
    npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets-resources-ja

  3. Vue.jsアプリでSpread.Sheetsを使用する

    次のサンプルコードを使用して、main.jsファイルを編集します。

    main.js
    コードのコピー 
    import { createApp } from 'vue'
import {GcSpreadSheets, GcWorksheet, GcColumn} from '@grapecity/spread-sheets-vue'
import App from './App.vue'
 
let app = createApp(App);
app.component('gc-Column', GcColumn);
app.component('gc-SpreadSheets', GcSpreadSheets);
app.component('gc-Worksheet', GcWorksheet);
app.mount('#app');

    次のサンプルコードを使用して、App.vueファイルを編集します。

    App.vue
    コードのコピー 
    <template>
    <div id="spread-host">
        <gc-SpreadSheets hostClass="spreadHost">
            <gc-Worksheet>
                <gc-Column>
                </gc-Column>
            </gc-Worksheet>
        </gc-SpreadSheets>
    </div>
</template>
<script>
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
    import * as GC from "@grapecity/spread-sheets";
    import '@grapecity/spread-sheets-resources-ja';
    GC.Spread.Common.CultureManager.culture('ja-jp');
    export default {
        name: 'app',
        components: {
        },
        data() {
            return {
            }
        }
    }
</script>
<style>
    .spreadHost
    { width: 800px; height: 800px; }
</style>

  4. アプリケーションを保存して実行する
    コマンドプロンプト
    コードのコピー 
    npm run serve
  1. Vue.jsプロジェクトを作成する

    コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

    コマンドプロンプト
    コードのコピー 
    npm install -g @vue/cli
npm i -g @vue/cli-init
vue init webpack spreadjs-quickstart :: Here, select Vue 2.
cd spreadjs-quickstart
npm run dev

    コマンドを実行すると、ディレクトリ内の指定の場所にVue.jsプロジェクトが作成されます。Vue.jsプロジェクトの作成方法については、https://vuejs.org/v2/guide/installation.htmlを参照してください。

  2. Spread.Sheets Vue.jsモジュールをインストールする

    Spread.Sheets Vue.jsモジュール、および日本語リソースを、npmからインストールします。

    コマンドプロンプト
    コードのコピー 
    npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets-resources-ja

  3. Vue.jsアプリでSpread.Sheetsを使用する

    必要に応じてApp.vueファイルを編集します。ブラウザウィンドウを更新すると、変更が反映されます。例として、次のサンプルコードを使用します。

    JavaScript
    コードのコピー 
    <template>
  <div>
      <gc-spread-sheets
        :hostClass='hostClass'
      >
        <gc-worksheet
          :dataSource="dataTable"
          :autoGenerateColumns = 'autoGenerateColumns'
        >
          <gc-column
            :width="width"
            :dataField="'price'"
            :visible = 'visible'
            :formatter = 'formatter'
            :resizable = 'resizable'
          ></gc-column>
        </gc-worksheet>
      </gc-spread-sheets>
  </div>
</template>
<script>
  import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  import  '@grapecity/spread-sheets-vue'
  export default {
    data(){
      return {
        hostClass:'spread-host',
        autoGenerateColumns:true,
        width:300,
        visible:true,
        resizable:true,
        formatter:"$ #.00"
      }
    },
    computed:{
      dataTable(){
        let dataTable = [];
        for (let i = 0; i < 42; i++) {
          dataTable.push({price: i + 0.56})
        }
        return dataTable
      }
    }
  }
</script>
<style scoped>
.spread-host {
    width: 500px;
    height: 600px;
}
</style>

  4. アプリケーションを保存して実行する
    コマンドプロンプト
    コードのコピー 
    npm run dev

従来のHTMLを使用してVue2を実装する

SpreadJSでは、従来のHTMLを使用してVue2を使用できます。この方法には、次の手順があります。

  1. HTMLページを作成する

    最初の手順として、HTMLページを作成します。

  2. HTMLテンプレートにSpread.SheetsおよびVue-Spread.Sheetsを追加する

    gc.spread.sheets.all.*.*.*.min.js、gc.SpreadJS.*.*.*.cssおよびgc.spread.sheets.vue.*.*.*.js ファイルへの参照を、HTMLテンプレート（index.htmlファイル）に追加します。

  3. VueアプリケーションでSpread.Sheetsを使用する

    これで、Spread.SheetsをVue.jsアプリケーション内で使用できるようになりました。例として、次のサンプルコードを使用します。

    JavaScript
    コードのコピー 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello SpreadJS Vue</title>
    <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
    <style>
        #app{
            width: 100%;
            height:100%;
        }
        .vue-demo{
            width: 800px;
            height:400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
 <app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template">
     <div>
        <gc-spread-sheets
          v-bind:hostClass='hostClass'
          @workbookInitialized='spreadInitHandle'
        >
            <gc-worksheet  >
            </gc-worksheet>
        </gc-spread-sheets>
     </div>
</script>
<script type="text/javascript">
    window.onload = function () {
        Vue.component('app', {
            template: '#app-template',
            data:function () {
                return {
                    hostClass: "vue-demo"
                }
            },
            methods: {
                spreadInitHandle: function (spread) {
                    window.mySpread = spread;
                    console.log('now you can also get spread from window');
                }
            }
        });
        new Vue({
            el:"#app",
        })
    }
</script>
</body>
</html>

<gc-spread-sheets>、<gc-worksheet>、および、<gc-column>は、タグ階層の基本要素です。他の要素は、それぞれ設定して使用します。なお、タグ階層は、以下のとおりです。

コードのコピー 
<gc-spread-sheets>
<gc-worksheet>
<gc-column></gc-column>
    ...
</gc-worksheet>
  ...
</gc-spread-sheets>

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.