SpreadJS+vue3练手使用

最新推荐文章于 2024-06-28 09:32:18 发布

曾不错吖

最新推荐文章于 2024-06-28 09:32:18 发布

阅读量808

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sisuiban/article/details/136302451

版权

在这里插入图片描述

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>