在线电子表格spreadjs

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-vue 

Index.vue:

<template>
  <div id="spread-host">
    <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
    </gc-spread-sheets>
  </div>
</template>

<script setup>
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity-software/spread-sheets-vue'
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity-software/spread-sheets";

function initWorkbook(spread) {
   let sheet = spread.getActiveSheet();
   sheet
     .getCell(0, 0)
     .vAlign(GC.Spread.Sheets.VerticalAlign.center)
     .value("Hello SpreadJS");
}
</script>

<style>
.spreadHost {
  width: 800px;
  height: 200px;
}
</style>

package.json:

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@grapecity-software/spread-excelio": "17.0.4",
    "@grapecity-software/spread-sheets": "^17.0.10",
    "@grapecity-software/spread-sheets-barcode": "17.0.4",
    "@grapecity-software/spread-sheets-charts": "17.0.4",
    "@grapecity-software/spread-sheets-designer": "17.0.4",
    "@grapecity-software/spread-sheets-designer-resources-cn": "17.0.4",
    "@grapecity-software/spread-sheets-designer-vue": "17.0.4",
    "@grapecity-software/spread-sheets-formula-panel": "17.0.4",
    "@grapecity-software/spread-sheets-ganttsheet": "17.0.4",
    "@grapecity-software/spread-sheets-io": "17.0.4",
    "@grapecity-software/spread-sheets-languagepackages": "17.0.4",
    "@grapecity-software/spread-sheets-pdf": "17.0.4",
    "@grapecity-software/spread-sheets-pivot-addon": "17.0.4",
    "@grapecity-software/spread-sheets-print": "17.0.4",
    "@grapecity-software/spread-sheets-reportsheet-addon": "17.0.4",
    "@grapecity-software/spread-sheets-resources-zh": "17.0.4",
    "@grapecity-software/spread-sheets-shapes": "17.0.4",
    "@grapecity-software/spread-sheets-slicers": "17.0.4",
    "@grapecity-software/spread-sheets-tablesheet": "17.0.4",
    "@grapecity-software/spread-sheets-vue": "^17.0.10",
    "axios": "^1.7.2",
    "element-plus": "^2.7.4",
    "pinia": "^2.1.7",
    "rollup-plugin-visualizer": "^5.12.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "wujie-vue3": "^1.0.22"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "npm-run-all2": "^6.1.2",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vite-plugin-vue-devtools": "^7.0.25",
    "vue-tsc": "^2.0.11"
  }
}

人工智能学习网站

https://chat.xutongbao.top