vue实现在线编辑excel

• Z时代
• 2024-01-10
• 分类：综合

不支持ie 支持edge 需要ie请换方法


vue不再赘述
安装x-data-spreadsheet
npm install x-data-spreadsheet

<template>
        <div id="x-spreadsheet-demo"></div>
</template>
<script>
    import Spreadsheet from \'x-data-spreadsheet\';
    import zhCN from \'x-data-spreadsheet/dist/locale/zh-cn\';
  export default {
    data() {
      return {
          options:{
      mode: \'edit\',
  showToolbar: true,
  showGrid: true,
  showContextmenu: true,
  view: {
      /*宽高，因为我是自定义的所以-----*/
      /*height: () => document.documentElement.clientHeight - 300,
      width: () => document.documentElement.clientWidth - 300,*/
    height: () => document.documentElement.clientHeight - 64,
    width: () => document.documentElement.clientWidth - 150,
  },
  formats: [],
  fonts: [],
  formula: [],
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  /*freeze: \'C3\',*/
  style: {
    bgcolor: \'#ffffff\',
    align: \'left\',
    valign: \'middle\',
    textwrap: false,
    textDecoration: \'normal\',
    strikethrough: false,
    color: \'#0a0a0a\',
    font: {
      name: \'Helvetica\',
      size: 10,
      bold: false,
      italic: false,
    },
  },
},
/*数组*/
optionss:[{
    name:\'aaaa\',
          /*freeze: \'C3\',*/
          styles: [
            {
                /*小框背景色*/
              bgcolor: \'#f4f5f8\',
              textwrap: true,
              color: \'#900b09\',
              border: {
                top: [\'thin\', \'#0366d6\'],
                bottom: [\'thin\', \'#0366d6\'],
                right: [\'thin\', \'#0366d6\'],
                left: [\'thin\', \'#0366d6\'],
              },
            },{
                /*小框背景色*/
              bgcolor: \'#000000\',
              textwrap: true,
              color: \'#000000\',
              border: {
                top: [\'thin\', \'#000000\'],
                bottom: [\'thin\', \'#000000\'],
                right: [\'thin\', \'#000000\'],
                left: [\'thin\', \'#000000\'],
              },
            },
          ],
          /*合并单元格*/
          merges: [
            \'C3:E4\',
          ],
          rows: {
              /*第1行*/
            1: {
              cells: {
                  /*第0列 2列*/
                0: { text: \'testingtesttestetst\' },
                2: { text: \'testing\' },
              },
            },
            2: {
              cells: {
                0: { text: \'render\', style: 0 },
                1: { text: \'Hello\' },
                2: { text: \'haha\', merge: [1, 2] },
              }
            },
            8: {
              cells: {
                8: { text: \'border test\', style: 0 },
              }
            }
          },
        },{
    name:\'aaaa\',
          /*freeze: \'C3\',*/
          styles: [
            {
                /*小框背景色*/
              bgcolor: \'#f4f5f8\',
              textwrap: true,
              color: \'#900b09\',
              border: {
                top: [\'thin\', \'#0366d6\'],
                bottom: [\'thin\', \'#0366d6\'],
                right: [\'thin\', \'#0366d6\'],
                left: [\'thin\', \'#0366d6\'],
              },
            },{
                /*小框背景色*/
              bgcolor: \'#000000\',
              textwrap: true,
              color: \'#000000\',
              border: {
                top: [\'thin\', \'#000000\'],
                bottom: [\'thin\', \'#000000\'],
                right: [\'thin\', \'#000000\'],
                left: [\'thin\', \'#000000\'],
              },
            },
          ],
          /*合并单元格*/
          merges: [
            \'C3:E4\',
          ],
          rows: {
              /*第1行*/
            1: {
              cells: {
                  /*第0列 2列*/
                0: { text: \'testingtesttestetst\' },
                2: { text: \'testing\' },
              },
            },
            2: {
              cells: {
                0: { text: \'render\', style: 0 },
                1: { text: \'Hello\' },
                2: { text: \'haha\', merge: [1, 2] },
              }
            },
            8: {
              cells: {
                8: { text: \'border test\', style: 0 },
              }
            }
          },
        }]
      }
    },
      methods: {
      },
    mounted:function(){
        /*中文*/
        Spreadsheet.locale(\'zh-cn\', zhCN);
        new Spreadsheet(\'#x-spreadsheet-demo\', this.options).loadData(this.optionss).change((data) => {
    console.log(data)
  });
  }
   }
</script>
<style>
</style>

以上是 vue实现在线编辑excel 的全部内容， 来源链接： utcz.com/z/376376.html