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

2022-07-12  本文已影响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;

上一篇下一篇

猜你喜欢

热点阅读