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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
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"
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.