国产在线国偷精品免费看,国产精品青青青,亚洲日韩v无码中文字幕

日韩福利首页在线观看网站-日韩福利免费网站视频在线-日韩福利局二区视频-日韩福利-日韩二区在线-日韩二区三区四区-日韩二区三-日韩电影中文字幕

如何利用SpreadJS+vue搭建表格編輯系統(tǒng)？

轉(zhuǎn)帖|使用教程|編輯：鮑佳佳|2021-01-22 16:38:48.290|閱讀 413 次

概述：本章將帶領(lǐng)大家繼續(xù)擴展 Vue 3 這個項目原型，實現(xiàn)數(shù)據(jù)綁定、模板文件導(dǎo)入/更新/導(dǎo)出和數(shù)據(jù)透視表等功能。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

本章將帶領(lǐng)大家繼續(xù)擴展 Vue 3 這個項目原型，實現(xiàn)數(shù)據(jù)綁定、模板文件導(dǎo)入/更新/導(dǎo)出和數(shù)據(jù)透視表等功能。

設(shè)計思路

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

SpreadJS 組件介紹

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

下載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設(shè)置容器的寬高位置等，也就是自定義了spread的顯示大小及位置。
導(dǎo)入此組件所需要的依賴。
在setup方法中新建一個spread。

在views/ SpreadSheet.vue中引入該組件及相關(guān)依賴。

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函數(shù)中初始化spread。

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

功能擴展：Excel 文檔導(dǎo)入/更新/導(dǎo)出

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

Load方法執(zhí)行excel文件的加載，接收到后臺傳遞的json數(shù)據(jù)后，即使用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執(zhí)行文件的更新。在設(shè)計器對加載的文件做些操作，如修改背景色、添加文本等，使用toJSON方法當(dāng)前spread保存為json數(shù)據(jù)傳遞給后臺存儲。

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方法執(zhí)行將spread json導(dǎo)出為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);      });

功能擴展：數(shù)據(jù)透視表

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

SpreadJS 的數(shù)據(jù)透視表支持兩種格式的數(shù)據(jù)源:

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

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

    <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>

使用一個表格的名稱去創(chuàng)建數(shù)據(jù)透視表：

    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);

也可使用工作表的一個范圍公式創(chuàng)建數(shù)據(jù)透視表：

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組件，點擊“加載”按鈕便可以看到剛才所修改的文件已被更新。

示例代碼

Vue3 集成 SpreadJS 組件 Demo下載

以上就是在Vue 3中集成SpreadJS與在線表格編輯器的全部內(nèi)容，除了 Vue ，SpreadJS 還可以原生的方式嵌入各類應(yīng)用（桌面軟件、app、web），并與各類前后端技術(shù)框架（java、.NET、JavaScript、Vue、React 等）相結(jié)合。

通過集成 SpreadJS ，開發(fā)者可研發(fā)出高性能的公式計算、在線導(dǎo)入導(dǎo)出 Excel 文檔、數(shù)據(jù)透視表和可視化分析功能，為系統(tǒng)使用者提供靈活易用的用戶體驗。

標簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：

上一篇：MS Visio圖表轉(zhuǎn)換示例！使用Aspose.Diagram在C#中將MS Visio圖表轉(zhuǎn)換為PDF 下一篇：圖像處理工具包ImagXpress用戶指南：使用觸摸功能