Vue.js & SpreadJS クイックスタート

npm -v

npm init vue@latest

Need to install the following packages:
create-vue@3.2.2
Ok to proceed? (y)

Project name: » spreadjs-vue-app

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
? Add Prettier for code formatting? » No / Yes

npm install
npm run dev

npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets-resources-ja

npm install @grapecity/spread-sheets-vue@15.0.5
npm install @grapecity/spread-sheets-resources-ja@15.0.5

<script setup>
// SpreadJS関連モジュールのインポート
import { GcSpreadSheets } from "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-resources-ja";

// SpreadJS 日本カルチャを設定します
GC.Spread.Common.CultureManager.culture("ja-jp");

// SpreadJSのライセンスキーを設定します
GC.Spread.Sheets.LicenseKey = "（ここにSpreadJSのライセンスキーを設定します）";

</script>

<template>
  <!-- ページ上でSpreadJSを表示するコンポーネントを定義します -->
  <gc-SpreadSheets hostClass="spreadHost"></gc-SpreadSheets>
</template>

<style>
/* SpreadJSのホストとなるDOM要素のスタイルを設定します */
.spreadHost {
  width: 800px;
  height: 500px;
  margin: 5px;
  border: 1px solid #ac9a9a;
}
</style>

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

npm run dev

<!-- SpreadJS本体（ワークブック） -->
<gc-SpreadSheets>
  <!-- ワークシート -->
  <gc-Worksheet>
    <!-- 列 -->
    <gc-Column></gc-Column>
  </gc-Worksheet>
</gc-SpreadSheets>

<template>
  <!-- ページ上でSpreadJSを表示するコンポーネントを定義します -->
  <gc-SpreadSheets hostClass="spreadHost">
    <gc-Worksheet :name="sheetName" :dataSource="data">
      <gc-Column dataField="商品名" :width="width">
      </gc-Column>
      <gc-Column dataField="カテゴリ" :width="width">
      </gc-Column>
      <gc-Column dataField="購入店" :width="width">
      </gc-Column>
      <gc-Column dataField="単価" :width="width" formatter="¥ #,###">
      </gc-Column>
    </gc-Worksheet>
  </gc-SpreadSheets>
</template>

<script setup>
// SpreadJS関連モジュールのインポート
import { GcSpreadSheets, GcWorksheet, GcColumn } from "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-resources-ja";

// SpreadJS 日本カルチャを設定します
GC.Spread.Common.CultureManager.culture("ja-jp");

// SpreadJSのライセンスキーを設定します
GC.Spread.Sheets.LicenseKey = "（ここにSpreadJSのライセンスキーを設定します）";

// シートの名前を設定します
// この変数はWorksheetタグのname変数に参照されます
const sheetName = "商品リスト";

// 列の幅を設定します
// この変数はColumnタグのwidth変数に参照されます
const width = 184;

// シートにバインドするデータを作成します
// この変数はWorksheetタグのdataSource変数に参照されます
const data = [
  { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 128000, '購入店': 'PCショップA' },
  { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
  { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 1980, '購入店': 'PCショップA' },
  { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 5680, '購入店': '家電量販店B' },
  { 商品名: 'プリンタ', カテゴリ: '周辺機器', 単価: 14480, '購入店': '家電量販店B' },
  { 商品名: 'SSD', カテゴリ: 'PCパーツ', 単価: 7980, '購入店': 'ネットショップC' },
  { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 168000, '購入店': 'PCショップA' },
  { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
  { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 4980, '購入店': 'PCショップA' },
  { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 4680, '購入店': '家電量販店B' },
];
</script>

npm run dev