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>