实如今线Excel编辑系统(一)

1、在线编辑Excel

现阶段的后台管理类系统，不少时候须要实如今线excel编辑的功能，主要有如下几点好处：

①在线浏览编辑excel文件（跨平台，零依赖，老是安装微软office不方便）

②文件管理，权限控制(资料安全，版本管理)

③协同办公（数据一致，无冲突）

 

2、技术储备

①具有html，css，js基础。

②了解npm，vue或者其余框架。

③了解http，先后端交互。

 

3、技术栈

前端：vue spreadjs elementui typescript vuecli3

后端：java spring boot

 

4、环境

①安装nodejs，npm，cnpm

②安装vuecli3 

cnpm i -g @vue/cli

③安装TypeScript

cnpm i -g typescript

查看版本号：

④初始化项目机构

vue create spreadjs-online-excel

选择最后一项：

用空格键和上下键将ts和vue-router选中回车初始化脚手架。

 

初始化了一个项目结构：

安装element-ui

cnpm i element-ui --save

在main.ts中将它引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

将项目当中部分冗余代码删掉，在views>home.vue中写入：

<template>
  <div class="home">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main></el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Home",

  components: {}
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}
html,
body,
#app,
.home,
.el-container,
.el-main {
  height: 100%;
  margin: 0;
}
</style>

可得页面布局完成：

接下来就是要在el-main中添加表格：

 

第一步，安装有关spreadjs的依赖，根据package.json文件和package.lock.json文件。

{
  "name": "spreadjs-online-excel01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@grapecity/spread-excelio": "^13.0.6",
    "@grapecity/spread-sheets": "^13.0.6",
    "@grapecity/spread-sheets-barcode": "^13.0.6",
    "@grapecity/spread-sheets-charts": "^13.0.7",
    "@grapecity/spread-sheets-resources-zh": "^13.0.6",
    "@grapecity/spread-sheets-vue": "^13.0.6",
    "@types/file-saver": "^2.0.1",
    "axios": "^0.19.2",
    "element-ui": "^2.13.0",
    "file-saver": "^2.0.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11"
  }
}

新建SpreadSheets.vue，写入以下代码：

<template>
    <div class="home">
      spread
      <div class="toolbar">
        <input type="file" class="el-button" @change="importExcel($event)" style="height: 40px;"/>
        <el-button @click="exportExcel()">导出 Excel</el-button>
    </div>
               <div class="spreadWrapper">
            <gc-spread-sheets class="spreadHost" @workbookInitialized="workbookInitialized($event)">
                <gc-worksheet></gc-worksheet>
            </gc-spread-sheets>
        </div> 
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
import GC from "@grapecity/spread-sheets";
import ExcelIO from "@grapecity/spread-excelio";
import FileSaver from "file-saver";
import '@grapecity/spread-sheets-charts';
import "@grapecity/spread-sheets-resources-zh";

GC.Spread.Common.CultureManager.culture("zh-cn");

export default class SpreadSheets extends Vue{
    spread: GC.Spread.Sheets.Workbook | null;
  constructor() {
    super();
    this.spread = null;
  }
  
  workbookInitialized(spread: GC.Spread.Sheets.Workbook) {
    this.spread = spread;
  }
  importExcel(event: any) {
    const file = event.target.files[0];
    let self = this;
    let excelIO = new ExcelIO.IO();
    excelIO.open(file, (spreadJSON: object) => {
      if (self.spread) {
        self.spread.fromJSON(spreadJSON);
      }
    });
  }
  exportExcel() {
    let self = this;
    if (self.spread) {
      let spreadJSON = JSON.stringify(self.spread.toJSON());
      let excelIO = new ExcelIO.IO();
      excelIO.save(spreadJSON, (blob:Blob)=>{
        FileSaver.saveAs(blob, "export.xlsx");
      })
    }
  }
}
</script>

<style>
.home,.spreadWrapper{
    /* height: 100%; */
     height: calc( 100% - 60px);

}
.spreadHost{
    width: 100%;
    height: 100%;
}
.toolbar{
    padding-bottom: 5px;
}
</style>

而后在home组件作一个引入：

<template>
    <div class="home">
        <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>
          <SpreadSheets /> 
          <!-- main -->
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import SpreadSheets from "@/components/SpreadSheets";
export default {
  name: 'Home',
  components: {
    // HelloWorld
     SpreadSheets
  }
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  html,body,#app,.home,.el-container,.el-main{
    height: 100%;
    margin: 0;
  }
</style>

便可实现如下效果（敏感信息已打马赛克）

在界面上修改excel的内容，点击导出，便可导出修改以后的excel文件，称得上比较炫酷。