JavaScriptフレームワーク「Nuxt.js」でSpreadJSを使う

npm -v

npx nuxi@latest init spreadjs-nuxtjs-app

npm run dev

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

npm install @mescius/spread-sheets-vue@17.0.4
npm install @mescius/spread-sheets-resources-ja@17.0.4

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

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

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

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

<style scoped>
.hostClass {
    width: 865px;
    height: 250px;
}
</style>

<template>
  <div>
    <SpreadSheet />
  </div>
</template>

export default defineNuxtConfig({ ssr: false, components: true })

npm run dev

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

<template>
  <div>
    <!-- ページ上でSpreadJSを表示するコンポーネントを定義します -->
    <gc-spread-sheets class="hostClass" @workbookInitialized="initSpread">
      <gc-worksheet :name="'商品リスト'" :dataSource="data">
        <gc-column :dataField="'カテゴリ'" :width=100></gc-column>
        <gc-column :dataField="'購入店'" :width=120></gc-column>
        <gc-column :dataField="'商品名'" :width=120></gc-column>
        <gc-column :dataField="'単価'" :width=80 :formatter=" numberFormatter "></gc-column>
      </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>

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

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

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

// リアクティブな変数の宣言
const spreadRef = ref(null);

// 第4列の書式を設定します
// この変数はColumnタグのformatter属性で参照されます
const numberFormatter = "¥ #,###";

// シートにバインドするデータを作成します
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' },
];

// SpreadJSを設定します
let initSpread = function (spread) {
  spreadRef.value = spread;
  const sheet = spread.getSheet(0);
  // 第1列と第3列を昇順に並べ替えます
  sheet.sortRange(-1, -1, -1, -1, true, [{index:0, ascending:true}, {index:2, ascending:true}]);
};
</script>

npm run dev