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>
    

      

  • 相关阅读:
    C语言和python分别计算文件的md5值
    C语言计算文件大小
    Linux内核源码下载
    Linux系统编程20_VFS虚拟文件系统
    Linux系统编程19_标准I/O
    C语言Review5_函数指针和数组指针
    C语言Review4_头文件引用符号的区别
    PDO之MySql持久化自动重连导致内存溢出
    小程序之app.json not found
    phpstorm之"Can not run PHP Code Sniffer"
  • 原文地址:https://www.cnblogs.com/theblogs/p/14283775.html
Copyright © 2011-2022 走看看