zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    高德车载导航自研图片格式的探索和实践
    导航定位向高精定位的演进与实践
    高德算法工程一体化实践和思考
    机器学习在高德用户反馈信息处理中的实践
    UI自动化技术在高德的实践
    高德网络定位算法的演进
    系统重构的道与术
    基于深度学习的图像分割在高德的实践
    MySQL索引那些事
    如何优雅的将Mybatis日志中的Preparing与Parameters转换为可执行SQL
  • 原文地址:https://www.cnblogs.com/theblogs/p/14283775.html
Copyright © 2011-2022 走看看