18深夜在线观看免费视频,日韩欧美精品图片在线,秋霞在线观看

如何利用SpreadJS+vue搭建表格編輯系統？

轉帖|使用教程|編輯：鮑佳佳|2021-01-22 16:38:48.290|閱讀 401 次

概述：本章將帶領大家繼續擴展 Vue 3 這個項目原型，實現數據綁定、模板文件導入/更新/導出和數據透視表等功能。

本章將帶領大家繼續擴展 Vue 3 這個項目原型，實現數據綁定、模板文件導入/更新/導出和數據透視表等功能。

設計思路

同時創建SpreadJS和Designer（表格編輯器）兩個組件，用切換路由的方式顯示不同組件類型。
在編輯器組件的工具欄中增加“加載”和“更新”兩個按鈕。
點擊“加載”即可加載從服務器獲取的Excel文件，在編輯器中對該組件做一些修改，點擊“更新”按鈕，將修改后的文件傳遞給服務器。
切換路由顯示 SpreadJS 組件，在該組件添加“加載”和“更新”兩個button，功能同上。

SpreadJS 組件介紹

SpreadJS是一款基于 HTML5 的原生JavaScript組件，兼容 450 種以上的 Excel 公式，提供高度類似 Excel 的功能，主要用于開發 Web Excel 組件，實現多人協同編輯、高性能模板設計和數據填報等功能模塊，組件架構符合UMD規范，可以以原生的方式嵌入各類應用，并與前后端技術框架相結合。

下載SpreadJS最新版

集成 SpreadJS 組件

首先在components/ SpreadSheet.vue中集成SpreadJS，代碼如下圖所示：

<template>    <div>      <div ref="ssHost" style="height:700px;width:100%;text-align: left;"></div>    </div>  </template>    <script>  import { onMounted, ref} from "vue";  import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"  import GC from "@grapecity/spread-sheets"    export default {    name: 'SpreadSheets',    props: {    },    setup(props, {emit}) {      const ssHost = ref(null);      onMounted(() => {        var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);        emit("workbookInitialized", workbook)      });      return {        ssHost      };    }  }  </script>

具備步驟如下：

在模板中添加一個div，這個div就是spread的容器，可以通過css設置容器的寬高位置等，也就是自定義了spread的顯示大小及位置。
導入此組件所需要的依賴。
在setup方法中新建一個spread。

在views/ SpreadSheet.vue中引入該組件及相關依賴。

import SpreadSheets from '../components/SpreadSheets.vue'  import {ref} from "vue"  import axios from "axios"  import GC from '@grapecity/spread-sheets'  import ExcelIO from '@grapecity/spread-excelio'

在模板中使用該組件標簽

<template>  <div>      <button @click="load($event)">加載</button>      <button @click="update($event)">更新</button>      <SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>  </div>  </template>

在setup函數中初始化spread。

let workbook = undefined;  let workbookInitialized=(wb)=>{      workbook = wb      }

功能擴展：Excel 文檔導入/更新/導出

Excel 文檔的導入/更新/導出功能可通過自定義“加載”、“更新”和“導出”按鈕實現，在SpreadSheet組件中添加自定義按鈕的思路，與上篇designer組件的設計思路一致：

Load方法執行excel文件的加載，接收到后臺傳遞的json數據后，即使用fromJSON方法加載該文件。

let load = (e)=>{          let formData = new FormData();          formData.append("fileName", "path");          axios.post('spread/loadTemplate', formData, {              responseType: "json",          }).then((response) => {              if(response) {                  alert("加載成功");                  templateJSON = response.data;                  workbook.fromJSON(templateJSON);              }          }).catch((response) => {              alert("錯誤");          })      }

Update執行文件的更新。在設計器對加載的文件做些操作，如修改背景色、添加文本等，使用toJSON方法當前spread保存為json數據傳遞給后臺存儲。

let update = (e)=>{          let spreadJSON = JSON.stringify(workbook.toJSON());          let formData = new FormData();          formData.append("jsonString", spreadJSON);          formData.append("fileName", "fileName");          axios.post('spread/updateTemplate', formData).then((response) => {              if(response) {                  alert("更新成功");              }          }).catch((response) => {              alert("錯誤");          })      }

Save方法執行將spread json導出為excel文件。

    //export SpreadJS json to excel file      excelio.save(json, function (blob) {          //do whatever you want with blob          //such as you can save it      }, function (e) {          //process error          console.log(e);      });

功能擴展：數據透視表

SpreadJS內置了數據透視表功能，通過將其集成到項目中，便可以使用數據透視表，該表支持排序、過濾等條件格式，可以按不同維度分析數據，并且可以自定義主題。

SpreadJS 的數據透視表支持兩種格式的數據源:

table name: 數據透視表使用一個表格的名字去獲取數據源。
range formula: 數據透視表使用工作表的一個范圍公式獲取數據，這個范圍公式必須是工作表的絕對路徑。

若使用數據透視表，需要添加如下鏈接到文檔的開始部分：

    <head>         ...         <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'> </script>         <script src='.../spreadjs/plugins/gc.spread.pivot.x.x.x.min.js' type='text/javascript'> </script>      </head>

使用一個表格的名稱去創建數據透視表：

    let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });      let sheet1 = spread.getSheet(0);      let sheet2 = spread.getSheet(1);      sheet1.setRowCount(250);      let table = sheet.tables.add('table1', 0, 0, 200, 200);      sheet1.setArray(0, 0, pivotSales);      let pivotTable = sheet2.pivotTables.add("PivotTable", "table1", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

也可使用工作表的一個范圍公式創建數據透視表：

let range = "=Sheet2!A1:D4";  let pivotTable = sheet2.pivotTables.add("PivotTable", range, 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

通過切換路由可以看到 SpreadJS 與在線表格編輯器可以正常切換顯示。在編輯器中修改加載的Excel文件，點擊工具欄“更新”按鈕，再切換至SpreadJS組件，點擊“加載”按鈕便可以看到剛才所修改的文件已被更新。