eta_front/src/views/datasheet_manage/components/SheetExcel.vue

<template>
  <div id="sheet-container">
  </div>
</template>

<script>
import { copyFit } from '@/utils/svgToblob.js';
import { initSheet } from '../common/option';
export default {
  props: {
    option: {
      type: Object,
      default: ''
    },
    sheetInfo: {
      type: Object,
      default: ()=>{}
    },
    limit: {
      type: Object,
      default: ()=>{
        return {disabled:false}
      }
    },
  },
  data() {
    return {
      sheetObj: {}
    }
  },
  methods: {
    init() {
      let optionData = this.option ? this.option : {};
      let callbackItems={updated:this.updateEmit}
      initSheet('sheet-container',optionData,this.sheetInfo,this.limit,callbackItems)
      setTimeout(() => {
        //获取sheet-container的宽度，设置更多操作的宽度
        //#luckysheet-icon-morebtn-div
        const sheetDom = document.querySelector('#sheet-container')
        const morebtn = document.querySelector('#luckysheet-icon-morebtn-div')
        morebtn.style.maxWidth = sheetDom.clientWidth - 70 +'px';
      }, 300);
    },
    copyDisable(e){
      // 变向的禁止复制
      // console.log(e.target.value && e.target.value.indexOf('lucksheet'));
      this.copyData()
      if(!this.limit.disabled) return
      if(e.target.value && e.target.value.indexOf('lucksheet')){
        luckysheet.enterEditMode();
        // luckysheet.exitEditMode();
        return false
      }
    },

    copyData() {
      let rangeArr = luckysheet.getRangeArray('twoDimensional');
      let str = ''
      rangeArr.forEach((item,r_index) => {
        let row = ''
        item.forEach((cell,index) => {
          row+= `${index!==0?'\t':''}${cell||''}`
        })
        str+= r_index===rangeArr.length-1 ? row : `${row}\n`
      });
      
      copyFit(str)
    },

    updateEmit(){
      this.$emit("updated")
    }
  },
  destroyed() {
    luckysheet.destroy();
  },
  mounted() {
    this.init();
    document.addEventListener('copy',this.copyDisable)
  },
  beforeDestroy(){
    document.removeEventListener('copy',this.copyDisable)
  }
}
</script>
<style scoped lang="scss">
#sheet-container {
  margin:0;padding:0;
  position:absolute;
  width:100%;left: 0px;top: 0;bottom:0px;
}

</style>

<style lang="scss">
  .luckysheet .toolbar {
    background: none;
    margin: 0;
    padding: 0;
  }
.luckysheet-input-box {
  z-index: 99999;
}
</style>