美文网首页
LAY_EXCEL + vue实现表格导入,导出

LAY_EXCEL + vue实现表格导入,导出

作者: 可乐_加冰_ | 来源:发表于2022-07-12 14:42 被阅读0次
    官方地址 http://excel.wj2015.com/_book/docs/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B.html
    
    ---------------------------------------HTML 部分-------------------------------------------------
      <input hidden ref="excel-upload-input" class="excel-upload-input" type="file"
                               id="upload-excel-file" accept=".xlsx, .xls" @change="handleClick" />
    
       <i class="el-icon-circle-plus-outline" @click="importExcel"></i>
    
    
    ---------------------------------------JS 部分-------------------------------------------------
    export default {
      name: "test",
      data() {
        return {};
      },
      mounted() {
      },
      methods: {
       
        //识别excel文件数据
        handleClick(e){
          e.preventDefault();
          let files = document.getElementById('upload-excel-file').files;
          try {
            // 方式二:可以在读取过程中梳理数据
            this.$layExcel.importExcel(files, {
              //自定义表格列对应数据。 ps:系统会自动识别当前对应列
            }, function(data) {
    
              let excel_data = JSON.stringify(data);
              console.log('excel表格数据',excel_data)
    
            });
          } catch (e) {
            console.log('识别错误',e.message)
          }
        },
        // 导入点击
        importExcel() {
          this.$refs["excel-upload-input"].click();
        },
        
        //测试导出表格
        handleExport() {
          console.log('测试导出')
          this.$layExcel.downloadExl([['Hello', 'World', '!']], 'hello', 'xlsx');
        }
    
      }
    }
    
    
    
    -----------------main.js 全局注册------------------------------
    import LAY_EXCEL from 'lay-excel';
    Vue.prototype.$layExcel = LAY_EXCEL;
    
    

    相关文章

      网友评论

          本文标题:LAY_EXCEL + vue实现表格导入,导出

          本文链接:https://www.haomeiwen.com/subject/prkabrtx.html