SpreadJS+vue3练手使用

在这里插入图片描述

SpreadJS的练手使用

// 首先在 package.json 这个文件里{"name": "app-admin","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"@element-plus/icons-vue": "^2.3.1","@vueuse/core": "^10.8.0","@vueuse/integrations": "^10.8.0","axios": "^1.6.7","element-plus": "^2.5.6","nprogress": "^0.2.0","qs": "^6.11.2","universal-cookie": "^6.1.3","vue": "^3.4.15","vue-router": "^4.2.5","vuex": "^4.0.2","@fortawesome/fontawesome-free": "^5.14.0","@grapecity/spread-excelio": "^14.0.1","@grapecity/spread-sheets": "^14.0.1","@grapecity/spread-sheets-barcode": "^14.0.1","@grapecity/spread-sheets-charts": "^14.0.1","@grapecity/spread-sheets-designer": "^14.0.1","@grapecity/spread-sheets-designer-resources-cn": "^14.0.1","@grapecity/spread-sheets-designer-vue": "^14.0.1","@grapecity/spread-sheets-languagepackages": "^14.0.1","@grapecity/spread-sheets-pdf": "^14.0.1","@grapecity/spread-sheets-pivot-addon": "^14.0.1","@grapecity/spread-sheets-print": "^14.0.1","@grapecity/spread-sheets-resources-zh": "^14.0.1","@grapecity/spread-sheets-shapes": "^14.0.1","@grapecity/spread-sheets-vue": "^14.0.1"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.3","vite": "^5.1.0","vite-plugin-windicss": "^1.9.3","windicss": "^3.5.6"}
}

在这里插入图片描述


//然后在页面上使用
<template><div><!-- <div ref="ssDesigner" style="height:calc(100vh - 94px);width:100%;text-align: left;"></div> --><div ref="ssDesigner" style="height:calc(100vh - 84px);width:100%;text-align: left;"></div></div></template><script setup>import { onMounted, ref } from "vue";import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";import "../../node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";import "@grapecity/spread-sheets-designer-resources-cn";import "@grapecity/spread-sheets-designer";import GC from '@grapecity/spread-sheets'import ExcelIO from '@grapecity/spread-excelio'const ssDesigner = ref(null);onMounted(() => {var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value);});</script>