實如今線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文件，稱得上比較炫酷。