Import and export - front-end logic

1. Import table ==> use plug-in: npm install xlsx
    
    import * as XLSX from 'xlsx'

    Plugin URL: https://vue-xlsx.netlify.app/

2. Export table ==> use plug-in: npm install file-saver

    import FileSaver from 'file-saver'

Note:    
    
    1. Import table and export table ==> common usage
    2. Export of paged data 
    3. Organizational structure of data export
    4. Performance optimization of import and export of large amounts of data

 

<template>
  <div class="home">
    <!--导出表-->
    <el-button type="success" @click="exportExcel">导出</el-button>
    <hr />
    <el-upload
      action=""
      accept=".csv,.xls,.xlsx"
      :on-change="importExcel"
      :show-file-list="false"
      :auto-upload='false'
    >
        <el-button size="small" type="primary">导入</el-button>
    </el-upload>

    <hr />
    
    <el-table
      :data="tableData"
      style="width: 100%"
      class="table"
    >
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods:{
    //导入表
    importExcel( file ){
      let that = this;
      let { raw } = file;
      //读取文件内容
      let render = new FileReader();
      //异步按照字节读取文件内容，结果用ArrayBuffer表示
      render.readAsArrayBuffer( raw );
      render.onload = function(){
        const buffer = render.result;
        //用数组表示出来
        const bytes = new Uint8Array( buffer );
        const length = bytes.byteLength;
        let binary = '';
        for( let i=0;i<length;i++){
          binary+= String.fromCharCode( bytes[i] );
        }
        const wb = XLSX.read( binary , { type: 'binary'});
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[ wb.SheetNames[0]]);
        console.log( outdata );
        let outarr = [...outdata];
        let arr = [];
        outarr.map( v=>{
          let obj = {};
          obj.id=v.序号;
          obj.name = v.姓名;
          obj.age = v.年龄;
          obj.address = v.地址;
          arr.push( obj );
        })
        that.tableData = arr;
      }
    },
    //导出
    exportExcel(){
      let xlsxParam = { raw:true };
      let table = document.querySelector('.table');
      //从那个table中导出
      const wb = XLSX.utils.table_to_book( table,xlsxParam );
      let wbout = XLSX.write(wb,{
        bookType:'xlsx',
        bookSST:true,
        type:'array'
      })

      try{
        FileSaver.saveAs(
          //导出的文件
          new Blob([wbout],{type:'application/octet-stream;charset=utf-8'}),
          //导出的文件名
          Math.random() + '.xlsx'
        )
      }catch( e ){
        console.log(  '导出失败:', e );
      }
      return wbout;
    }
  }
}
</script>

Two vue uses xlsx export function (and its selection export, conditional export, partial field export)

1. Download the xlsx plugin

npm install --save xlsx

2. Used in main.js

import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX```

3. Used in the vue page

   <el-button type="success" @click="exportExcel" size="small" icon="el-icon-upload2">导出</el-button>

  exportExcel() {
                let list = [];
                if (this.selectRows.length>0){ //如图我选择了导出那几条数据则导出我需要导出的数据（this.selectRows表示我选中导出数据的数组）
                    list =this.selectRows  //选择导出部分代码
                    this.exportList(list);
                } else {//如果木有选择则导出全部数据
                    console.log(this.selectRows)
                    this.axios
                        .get("/sec/secVisitorRegister/list?isPage=false", {params: this.params})
                        .then(res => {
                            console.log(res.data.data);
                            list = res.data.data; //导出全部代码或条件查询出来的代码
                            this.exportList(list);
                        });
                }


            },
            exportList(list){
                let tableData = [
                    ['序号','姓名', '联系电话','来访时间', '同行人数',"单位或住址","来访目的","备注"]//导出表头
                ] // 表格表头
                list.forEach ((item,index)=> {
                    let rowData = []
                    //导出内容的字段
                    rowData = [
                        index+1,
                        item.name,
                        item.phone,
                        item.registerTime,
                        item.numberPeople,
                        item.address,
                        item.purpose,
                        item.memo,
                    ]
                    tableData.push(rowData)
                })
                let ws = this.XLSX.utils.aoa_to_sheet(tableData)
                let wb = this.XLSX.utils.book_new()
                this.XLSX.utils.book_append_sheet(wb, ws, '来访记录') // 工作簿名称
                this.XLSX.writeFile(wb, '来访记录.xlsx') // 保存的文件名
            },