vue+elementui下实现excel表格读写操作

vue+elementui下实现excel表格读写操作

作者：不染心

时间：2022/5/2

项目地址： https://mianbaoduo.com/o/bread/mbd-Ypqam5lx

一、演示动图

二、读取表格

//======================================excel录入功能===================================
    fixdata(data) { //文件流转BinaryString
      var o = "",
      l = 0,
      w = 10240;
      for(; l < data.byteLength / w; ++l) 
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
      return o;
    },
    // 文件读取
    getFile(item) {
      
        let wb;  // 读取完成的数据
        console.log(item.file);
        // this.form.datafile = item.file;
        // this.form.name = item.file.name;

        var reader = new FileReader();
        reader.readAsBinaryString(item.file);
        var that = this;
        reader.onload = function(e) {
            var data = e.target.result;
            var zzexcel = XLSX.read(data, {
                type: 'binary'
            });
            var jsondata = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[0]]);
            console.log(jsondata);          
       
        }
    }

三、写入表格

 //======================================导出为excel功能===================================
    orderListToExcel() {
      console.log("导出为excel");
      var aoa = [];
      var title = [];
      for(var p in this.tableData[0]){
        title.push(p);
      }
      aoa.push(title);
      console.log(title);
      for(var i in this.tableData){
        var value_temp = [];
        // console.log(this.list[i]);
        for(var j in title){
          // console.log(this.list[i][title[j]]);
          value_temp.push(this.tableData[i][title[j]]);
        }
        aoa.push(value_temp);
      }
      console.log(aoa);
      var sheet = XLSX.utils.aoa_to_sheet(aoa);
      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, sheet, 'order');
      XLSX.writeFile(workbook, 'orders.xlsx');
      // openDownloadDialog(sheet2blob(sheet), 'orders.xlsx');

    },

四、完整代码

<template>
  <div class="app-container">
    <div class="filter-container" style="margin:10px;">
      

      <el-button size="small" class="filter-item" style="margin-left: 10px;float:right;" type="primary" icon="el-icon-search" @click="orderListToExcel" >
        导出
      </el-button>
      <el-upload
          :file-list="fileList"
          @on-change="handleChange"
          :http-request="getFile"
          style="float:right;"
          >
          <el-button size="small" type="warning" icon="el-icon-circle-plus" style="margin-left: 10px;">导入</el-button>
      </el-upload>
    </div>
    <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
    </div>


  </div>
</template>

<script>
// import AddUserDialog from './components/addUserDialog'
import {getuserbycondition, del, getUserById, getuserdata, getalluser} from '@/api/user'
import XLSX, { WorkSheet } from "xlsx";

export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      allData: null,
      listLoading: true,



      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    
 //======================================导出为excel功能===================================
    orderListToExcel() {
      console.log("导出为excel");
      var aoa = [];
      var title = [];
      for(var p in this.tableData[0]){
        title.push(p);
      }
      aoa.push(title);
      console.log(title);
      for(var i in this.tableData){
        var value_temp = [];
        // console.log(this.list[i]);
        for(var j in title){
          // console.log(this.list[i][title[j]]);
          value_temp.push(this.tableData[i][title[j]]);
        }
        aoa.push(value_temp);
      }
      console.log(aoa);
      var sheet = XLSX.utils.aoa_to_sheet(aoa);
      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, sheet, 'order');
      XLSX.writeFile(workbook, 'orders.xlsx');
      // openDownloadDialog(sheet2blob(sheet), 'orders.xlsx');

    },


    //======================================excel录入成绩功能===================================
    fixdata(data) { //文件流转BinaryString
      var o = "",
      l = 0,
      w = 10240;
      for(; l < data.byteLength / w; ++l) 
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
      return o;
    },
    // 文件读取
    getFile(item) {
      
        let wb;  // 读取完成的数据
        console.log(item.file);
        // this.form.datafile = item.file;
        // this.form.name = item.file.name;

        var reader = new FileReader();
        reader.readAsBinaryString(item.file);
        var that = this;
        reader.onload = function(e) {
            var data = e.target.result;
            var zzexcel = XLSX.read(data, {
                type: 'binary'
            });
            var jsondata = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[0]]);
            console.log(jsondata);          
       
        }
    }
    
    

  }
}
</script>
<style lang="scss" scoped>
.table{
  height: 80%;
}

.app-container {
  margin-top: 10px;
  width: 100%;
  height: 93vh;
  overflow: auto;
  padding-bottom: 25px;
}
.filter-container > span{
  margin-left: 20px;
  margin-right: 5px;
}
.Paging_b {
  text-align: center;
  line-height: 40px;
}


</style>