spread.js集成vue导入模板实现表单保护

 

SpreadJS 是一款基于 HTML5 的纯前端表格控件，可为用户提供高度类似 Excel 的功能，满足 Web Excel 组件开发、 表格文档协同编辑、 数据填报、 类Excel报表设计等业务场景需求。

需求，管理员权限下只能查看表格不能编辑，这时候就需要用到了表单保护。

可以通过设置表单的isProtected来限制表单的操作行为，例如不允许编辑，或调整行列高宽等

同时需要设置locked为true

<template>
    <div class="home">
      <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);
        /*实现表单保护，设置了sheet每个单元格都不能编辑*/
        let sheet = self.spread.getActiveSheet();
        sheet.options.isProtected = true;
        let defaultStyle = sheet.getDefaultStyle();
        defaultStyle.locked = true;//设置locked默认为true
      }
    });
  }
  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>