SpreadJSはHTML5ベースの纯前端表格控件であり、ユーザーにExcelに近い機能を提供します。Web Excelコンポーネント開発、表格ドキュメントの共同編集、データ収集、類Excelレポートデザインなどのビジネスシナリオの需求に対応できます。

管理の役割を果たす场景において、管理者権限でシートを表示だけで編集できないようにする必要があります。このような需求を満たすために、シート保護功能が重要になります。

SpreadJSでは、シートのisProtectedプロパティを設定することで、操作の制限を実現できます。例えば、编辑の禁止、行列の高さや幅の調整禁止などの制限を加えることができます。同时に、lockedプロパティをtrueに設定する必要があります。

<template>
    <div class="container">
      <div class="toolbar">
        <input type="file" class="upload-btn" @change="loadTemplateFile($event)" accept=".xlsx,.xls" />
        <el-button @click="downloadResult()">Excelダウンロード</el-button>
      </div>
      <div class="spreadsheet-wrapper">
            <gc-spread-sheets class="spreadsheet-area" @workbookInitialized="initWorkbook($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 SpreadsheetComponent extends Vue{
    workbook: GC.Spread.Sheets.Workbook | null;
    constructor() {
      super();
      this.workbook = null;
    }
  
  initWorkbook(spreadInstance: GC.Spread.Sheets.Workbook) {
    this.workbook = spreadInstance;
  }
  
  loadTemplateFile(event: any) {
    const selectedFile = event.target.files[0];
    let vm = this;
    let excelImporter = new ExcelIO.IO();
    excelImporter.open(selectedFile, (jsonData: object) => {
      if (vm.workbook) {
        vm.workbook.fromJSON(jsonData);
        /*シート保護の実装：すべてのセルの編集を禁止*/
        let activeSheet = vm.workbook.getActiveSheet();
        activeSheet.options.isProtected = true;
        let defaultStyle = activeSheet.getDefaultStyle();
        defaultStyle.locked = true;
      }
    });
  }
  
  downloadResult() {
    let vm = this;
    if (vm.workbook) {
      let jsonString = JSON.stringify(vm.workbook.toJSON());
      let excelExporter = new ExcelIO.IO();
      excelExporter.save(jsonString, (resultBlob: Blob) => {
        FileSaver.saveAs(resultBlob, "output.xlsx");
      })
    }
  }
}
</script>