https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-js
右键另存这个官方的示例页面可以下载全部js文件
https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html
spread.html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="spreadjs culture" content="zh-cn" />
<title>SpreadJS Designer</title>
<link
href="./public/spread/gc.spread.sheets.excel2013white.css"
rel="stylesheet"
type="text/css"
/>
<link
href="./public/spread/gc.spread.sheets.designer.17.0.2.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body unselectable="on">
<div
id="gc-designer-container"
role="application"
style="height: 600px"
></div>
<script src="./public/spread/gc.spread.sheets.all.min.js"></script>
<script async src="./public/spread/gc.spread.sheets.shapes.min.js"></script>
<script async src="./public/spread/gc.spread.sheets.charts.min.js"></script>
<script
async
src="./public/spread/gc.spread.sheets.slicers.min.js"
></script>
<script async src="./public/spread/gc.spread.sheets.print.min.js"></script>
<script
async
src="./public/spread/gc.spread.sheets.barcode.min.js"
></script>
<script async src="./public/spread/gc.spread.sheets.pdf.min.js"></script>
<script
async
src="./public/spread/gc.spread.pivot.pivottables.min.js"
></script>
<script
async
src="./public/spread/gc.spread.sheets.tablesheet.min.js"
></script>
<script
async
src="./public/spread/gc.spread.sheets.ganttsheet.min.js"
></script>
<script
async
src="./public/spread/gc.spread.report.reportsheet.min.js"
></script>
<script
async
src="./public/spread/gc.spread.sheets.formulapanel.min.js"
></script>
<script async src="./public/spread/gc.spread.excelio.min.js"></script>
<script async src="./public/spread/gc.spread.sheets.io.min.js"></script>
<script
async
src="./public/spread/gc.spread.sheets.resources.zh.min.js"
></script>
<script
async
src="./public/spread/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"
></script>
<script
async
src="./public/spread/gc.spread.sheets.designer.all.17.0.2.min.js"
></script>
<script type="text/javascript">
window.onload = function () {
//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';
var config = GC.Spread.Sheets.Designer.DefaultConfig
config.commandMap = {
Welcome: {
title: 'Welcome',
text: 'Welcome',
iconClass: 'ribbon-button-welcome',
bigButton: 'true',
commandName: 'Welcome',
execute: function (context, propertyName, fontItalicChecked) {
alert('Welcome to new designer.')
},
},
}
config.ribbon[0].buttonGroups.unshift({
label: 'NewDesigner',
thumbnailClass: 'welcome',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['Welcome'],
},
],
},
})
var designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById('gc-designer-container'),
config
)
}
</script>
</body>
</html>
- 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.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link
href="/spread/gc.spread.sheets.excel2013white.css"
rel="stylesheet"
type="text/css"
/>
<link
href="/spread/gc.spread.sheets.designer.17.0.2.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="/spread/gc.spread.sheets.all.min.js"></script>
<script src="/spread/gc.spread.sheets.shapes.min.js"></script>
<script src="/spread/gc.spread.sheets.charts.min.js"></script>
<script src="/spread/gc.spread.sheets.slicers.min.js"></script>
<script src="/spread/gc.spread.sheets.print.min.js"></script>
<script src="/spread/gc.spread.sheets.barcode.min.js"></script>
<script src="/spread/gc.spread.sheets.pdf.min.js"></script>
<script src="/spread/gc.spread.pivot.pivottables.min.js"></script>
<script src="/spread/gc.spread.sheets.tablesheet.min.js"></script>
<script src="/spread/gc.spread.sheets.ganttsheet.min.js"></script>
<script src="/spread/gc.spread.report.reportsheet.min.js"></script>
<script src="/spread/gc.spread.sheets.formulapanel.min.js"></script>
<script src="/spread/gc.spread.excelio.min.js"></script>
<script src="/spread/gc.spread.sheets.io.min.js"></script>
<script src="/spread/gc.spread.sheets.resources.zh.min.js"></script>
<script src="/spread/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script>
<script src="/spread/gc.spread.sheets.designer.all.17.0.2.min.js"></script>
</body>
</html>
- 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.
designer/Index.vue:
<template>
<div id="gc-designer-container" style="height: 600px"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
const init = () => {
//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';
//@ts-ignore
let config = GC.Spread.Sheets.Designer.DefaultConfig
config.commandMap = {
Welcome: {
title: 'Welcome',
text: 'Welcome',
iconClass: 'ribbon-button-welcome',
bigButton: 'true',
commandName: 'Welcome',
// @ts-ignore
execute: function (context, propertyName, fontItalicChecked) {
alert('Welcome to new designer.')
},
},
}
config.ribbon[0].buttonGroups.unshift({
label: 'NewDesigner',
thumbnailClass: 'welcome',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['Welcome'],
},
],
},
})
//@ts-ignore
let designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById('gc-designer-container'),
config
)
let sheet = designer.Spread.getActiveSheet()
sheet
.getCell(0, 0)
//@ts-ignore
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.value('Hello')
console.log('success')
}
onMounted(() => {
init()
})
</script>
- 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.
sheet/Index.vue:
<template>
<div id="gc-sheet-container" style="height: 600px"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
const init = () => {
//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';
//@ts-ignore
let spread = new GC.Spread.Sheets.Workbook(
document.getElementById('gc-sheet-container'),
{ sheetCount: 1 }
)
let sheet = spread.getSheet(0)
sheet.setText(0, 0, 'hello')
console.log('success')
}
onMounted(() => {
init()
})
</script>
- 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.
package.json:
{
"name": "m-spread",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"build1": "node --max-old-space-size=8096 ./node_modules/vite/bin/vite.js build",
"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"
},
"dependencies": {
"pinia": "^2.1.7",
"rollup-plugin-visualizer": "^5.12.0",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.14.5",
"@vitejs/plugin-vue": "^5.0.5",
"@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.2.0",
"typescript": "~5.4.0",
"vite": "^5.3.1",
"vite-plugin-vue-devtools": "^7.3.1",
"vue-tsc": "^2.0.21"
}
}
- 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.
vite.config.js:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3006
},
plugins: [
vue(),
vueDevTools(),
visualizer()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.