SpreadJS製品ヘルプ
Vue.js
リボンコンテナ > JavaScriptフレームワーク > Vue.js

Vueアプリケーションにリボンコンテナを追加するには、次の手順を実行します。

  1. コマンドプロンプトで次のコマンドを実行して、Vueアプリを作成します。
    コマンドプロンプト
    コードのコピー
    npm install -g @vue/cli
    npm i -g @vue/cli-init
    vue init webpack designercomponent
    cd designercomponent
    npm run dev
    

  2. Spread.Sheets Vue.jsモジュールをインストールします。
    コマンドプロンプト
    コードのコピー
    npm install @grapecity/spread-excelio
    npm install @grapecity/spread-sheets
    npm install @grapecity/spread-sheets-barcode
    npm install @grapecity/spread-sheets-charts
    npm install @grapecity/spread-sheets-languagepackages
    npm install @grapecity/spread-sheets-pdf
    npm install @grapecity/spread-sheets-print
    npm install @grapecity/spread-sheets-shapes
    npm install @grapecity/spread-sheets-resources-ja
    npm install @grapecity/spread-sheets-pivot-addon
    npm install @grapecity/spread-sheets-designer
    npm install @grapecity/spread-sheets-designer-resources-ja
    npm install @grapecity/spread-sheets-vue
    npm install @grapecity/spread-sheets-designer-vue
    

  3. 次のサンプルコードを使用して、App.vueファイルに必要なモジュールをインポートし、テンプレートにデザイナのタグを追加します。
    App.vue
    コードのコピー
    <!--テンプレートにデザイナのタグを追加します。-->
    <template>
      <div id="app">
        <gc-spread-sheets-designer :styleInfo='styleInfo'
                                   :config='config'
                                   @designerInitialized="designerInitialized">
        </gc-spread-sheets-designer>
      </div>
    </template>
    <script>
    
    // 必要なモジュールをインポートします。
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
    import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
    import '@grapecity/spread-sheets-designer-resources-ja'
    import '@grapecity/spread-sheets-designer-vue'
    export default {
      name: 'App',
      data: function () {
        return {
          styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' },
          config: null,
          designer: null
        }
      },
      methods: {
        designerInitialized (value) {
          this.designer = value
        }
      }
    }
    </script>
    <style>
    </style>
    

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

ライセンスキーを設定する

Vue使用時は、SpreadJS、リボンコンテナのほか、ExcelIOに対してもライセンスキーの設定が必要となります。ExcelIOのライセンスキーにはSpreadJSのライセンスキーを設定します。

JavaScript
コードのコピー
import '@grapecity/spread-sheets-designer-resources-ja'
import { Designer } from '@grapecity/spread-sheets-designer-vue'
import * as GC from '@grapecity/spread-sheets'
import * as ExcelIO from '@grapecity/spread-excelio'
// ライセンスキー
var sjsLicense = 'sjs-distribution-key'
GC.Spread.Sheets.LicenseKey = sjsLicense
ExcelIO.LicenseKey = sjsLicense
GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key'