vue3+ts+vite项目中使用spreadjs，通过script标签引入spreadjs可以提高打包速度

news2025/1/21 12:57:18

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>

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>

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>

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>

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"
  }
}

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))
    }
  }
})