Vueアプリケーションにリボンコンテナを追加するには、次の手順を実行します。
コマンドプロンプト |
コードのコピー
|
---|---|
npm install -g @vue/cli npm i -g @vue/cli-init vue init webpack designercomponent cd designercomponent npm run dev |
コマンドプロンプト |
コードのコピー
|
---|---|
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 |
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> |
コマンドプロンプト |
コードのコピー
|
---|---|
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' |