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

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

  1. コマンドプロンプトで次のコマンドを実行して、Vueアプリを作成します。
    コマンドプロンプト
    コードのコピー 
    npm init vue@latest

    このコマンドは、Vueプロジェクトに追加できるプロジェクト名およびその他のオプション機能のプロンプトを表示します。

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

  3. Vueコンポーネントをアプリケーションのmain.jsファイルに登録します。
    main.js
    コードのコピー 
    import { createApp } from 'vue'
import App from './App.vue'
import Designer from "@grapecity/spread-sheets-designer-vue"
let app = createApp(App);
app.component("gc-spread-sheets-designer", Designer);
app.mount('#app');

  4. App.vueファイルを変更して、Vueコンポーネントをアプリケーションに追加します。
    App.vue
    コードのコピー 
    <script setup>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-resources-ja";
import "@grapecity/spread-sheets-designer-resources-ja";
import "@grapecity/spread-sheets-designer";
GC.Spread.Common.CultureManager.culture("ja-jp");

const styleInfo = { height: "98vh", width: "100%"};
const config = null;
const spreadOptions = {sheetCount: 2};
var designer =  null;

function designerInitialized(value) {
    designer = value;
    let spread = designer.getWorkbook();
    let sheet = spread.getSheet(0);
    sheet.setValue(0,0, "Vue3 Sample");
}
</script>

<template>
  <div id="gc-designer-container">
    <gc-spread-sheets-designer
      :styleInfo="styleInfo"
      :config="config"
      :spreadOptions="spreadOptions"
      @designerInitialized="designerInitialized"/>
  </div>
</template>

<style>
</style>

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

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

  2. SpreadJSとVueモジュールをインストールします。
    コマンドプロンプト
    コードのコピー 
    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-tablesheet
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-resources-ja
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
    コードのコピー 
    <!--Add designer tag into the template-->
<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 * as GC from "@grapecity/spread-sheets"
import '@grapecity/spread-sheets-shapes'
import '@grapecity/spread-sheets-pivot-addon'
import '@grapecity/spread-sheets-tablesheet'
import '@grapecity/spread-sheets-resources-ja'
import '@grapecity/spread-sheets-designer-resources-ja'
import '@grapecity/spread-sheets-designer-vue'

// カルチャ設定。
GC.Spread.Common.CultureManager.culture('ja-jp');

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>

  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'

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.