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

于 2024-06-28 09:32:18 发布
阅读量482 收藏 5
点赞数 9
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/140033353
版权

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

人工智能学习网站

https://chat.xutongbao.top

徐同保
关注
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
Vue集成SpreadJS实现Excel（高级详解）
最新发布
A的博客
06-12 1728
SpreadJS是一款由GrapeCity开发的 JavaScript 电子表格库。它提供了类似于 Microsoft Excel 的功能，可以在 Web 应用程序中创建、编辑和展示复杂的电子表格。SpreadJS 可以用于创建各种类型的应用程序，包括企业级数据分析、财务报告、计算和数据可视化等。数据绑定和格式化：支持从各种数据源（如 JSON、XML、CSV 等）加载数据，并支持数据格式化和显示。
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（功能拓展）
葡萄城技术团队博客
01-07 1192
通过环境搭建和组件集成，我们学会使用 Vite 和 SpreadJS ，将在线Excel的编辑功能集成在Vue 3项目中。 本章，我将带领大家继续扩展 Vue 3 这个项目原型，实现数据绑定、模板文件导入/更新/导出和数据透视表等功能，本章的实现思路与上一篇“组件集成”基本类似。 设计思路 · 同时创建SpreadJS 和Designer（表格编辑器）两个组件，用切换路由的方式显示不同组件类型。 · 在编辑器组件的工具栏中增加“加载”和“更新”两个按钮。 · 点击“加载”即可加载从服务器获取的Excel文件
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（组件集成）
qq_18932003的博客
10-05 967
通过前文的学习，我们已经搭建出了一个基于 Vue 3 的项目原型，并借助 Vite 免打包的概念，实现了快速的冷启动、即时的热模块更新，以及真正的按需编译。 今天，我们将通过集成 SpreadJS 电子表格组件和在线表格编辑器组件，使该项目原型具备 Excel公式计算、在线导入导出 Excel 文档、数据透视表和可视化分析能力，进而实现在线表格编辑系统的雏形。 设 计 思 路 同时创建 SpreadJS 和 Designer（表格编辑器）两个组件...
vue3项目使用SpreadJS（授权，首次渲染页面卡死）
LUOandHUANG的博客
12-09 2371
vue3项目使用SpreadJS 前段时间接到一个需求，需要在项目中使用到SpreadJS，第一次接触SpreadJS，感觉这个表格控件的功能真的是非常的强大，基本满足excel的使用功能，目前发现的不足就是，当json文件中数据量大，包含大量计算公式时，首次的渲染可能较慢，还有的就是要收费。 ...
SpreadJS+vue3练手使用
四岁爱上了她的博客
02-26 759
【代码】SpreadJS+vue3练手使用。
Vue 3 组件开发：搭建基于 Vite 的在线表格编辑系统（组件集成）
葡萄城技术团队博客
01-06 1767
通过前文的学习，我们已经用 Vite 搭建出了Vue 3 的项目原型。今天，我们将基于这个原型，集成 SpreadJS 电子表格组件和在线编辑器组件，使其具备 Excel公式计算、在线导入导出 Excel 文档、数据透视表和可视化分析能力，实现在线表格编辑系统的雏形。 设计思路 · 同时创建SpreadJS 和Designer（表格编辑器）两个组件，用切换路由的方式显示不同组件类型。 · 在编辑器组件的工具栏中增加“加载”和“更新”两个按钮。 · 点击“加载”即可加载从服务器获取的Excel文件，在编辑器中
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）
葡萄城技术团队博客
01-05 1031
Vue是一套用于构建用户界面的渐进式框架，与其它大型 JS 框架不同，Vue 被设计为可以自底向上逐层应用，更易上手，还便于与第三方库或既有项目整合，因此，Vue完全能够为复杂的单页应用提供驱动。 2020年09月18日，Vue.js 3.0 正式发布，作者尤雨溪将其描述为：更快、更小、更易于维护。 Vue 3都加入了哪些新功能？ 本次发布， Vue框架本身迎来了多项更新，如Vue 此前的反应系统是使用 Object.defineProperty 的 getter 和 setter。 但是，在 Vue 3.
只需3 分钟，就能创建 一个SpreadJS 的 Vue 项目
weixin_34088583的博客
09-25 1489
概述SpreadJS纯前端表格控件 V11.2（SP2）版本已经全面支持了Vue拓展，下面我们看下如何配合VUE CLI，只需3分钟快速构建一个SpreadJS Vue工程。安装vue-cli（耗时30S）通过命令```npm install -g @vue/cli ```安装（cli.vuejs.org/）创建vue-spreadjs工程（耗时1Min）请根据项目需求配置工程选项：通过npm i...
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 1836
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
vue3+ts+pinia+vite一次性全搞懂
qq_45018844的博客
04-21 1560
简单来说：是一个vue3版本的vuexpinia官网地址建好一个store文件下面的index.ts文件这一步是官网中的描述，定义一个defineStoreimport {// 相当于datareturn {// 相当于计算属性getters: {//相当于vuex中的mutation+action，可以同时写同步和异步的代码actions: {
vue3+vite+ts创建项目
m0_69889435的博客
08-01 1312
vue3+vite+ts创建项目。
Vue3+script setup+ts+Vite+Volar搭建项目
rdl111的博客
03-21 1281
目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup（Composition API 的语法糖） 安装 Volar 结尾 好久没有写了，最近看到Vue3.2 发布了，害，又要开始卷了么。 其实我自己本身还没有使用过Vue3 做过实际的项目开发，然鹅又出新东西了……， 新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。 什么？ 你说谈对象？ xswl，我特么一个农民工
vue 中使用spreadJS在线编译excel文档
m0_60648668的博客
08-19 2704
Vue中使用SpreadJS,并可自定义导入sheet页
vue引入spreadjs
qq_41615201的博客
01-30 1596
本文章记录vue 引入 SpreadJS 的方法
vue3+vite开发组件库如何通过script标签引入
yysshhyy的博客
03-29 833
因为vue3与vue2的不同导致vue2与vue3注册全局组件的方式不同，vue3只能通过这种方式定义一个全局的方法，并在需要使用的工程中，调用这个方法，将vue对象传递过来，上面的图片是组件库的图片，下面的图片是工程中引入这个组件库，相当于注册了全局组件。不同的是，这个只能通过import引入，并不能通过script标签引入打包后的js文件。
SpreadJS 在Vue 上的引用
wshong1990的博客
02-10 1735
SpreadJS 在Vue 上的引入 Java + Vue + SpreadJS 打开服务器上Execl文件
在vue3+ts+vite项目中使用vue3-seamless-scroll
05-11
要在 Vue 3 + TypeScript + Vite 项目中使用 vue3-seamless-scroll，可以按照以下步骤进行： 1. 安装依赖： ```bash npm install vue3-seamless-scroll ``` 2. 在需要使用无缝滚动的组件中，引入 `vue3-seamless-scroll`： ```vue <template> <vue3-seamless-scroll :list="list" :speed="speed" :itemWidth="itemWidth"> <div v-for="(item, index) in list" :key="index">{{ item }}</div> </vue3-seamless-scroll> </template> <script lang="ts"> import { defineComponent } from 'vue'; import Vue3SeamlessScroll from 'vue3-seamless-scroll'; export default defineComponent({ components: { Vue3SeamlessScroll, }, data() { return { list: ['item1', 'item2', 'item3'], speed: 50, itemWidth: 100, }; }, }); </script> ``` 3. 在 `tsconfig.json` 中添加以下配置： ```json { "compilerOptions": { "types": ["vue3-seamless-scroll"] } } ``` 这样就可以在 Vue 3 + TypeScript + Vite 项目中使用 vue3-seamless-scroll 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值