前端vue的导入和导出数据

导入

 <el-upload
        class="upload-demo"
        action=""
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false">
      <Button size="small" type="primary">点击上传</Button>
    </el-upload>

<script>
export default{
    methods:{
        handleChange(file, fileList){ // 上传文件时处理方法 
        this.fileTemp = file.raw;
        if(this.fileTemp){
            if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
                || (this.fileTemp.type == 'application/vnd.ms-excel')){
                this.importfxx(this.fileTemp);
            } else {
                this.$Message.error('附件格式错误，请删除后重新上传！')
            }
        } else {
            this.$Message.error('请上传附件！')
        }
    },
         //超出最大上传文件数量时的处理方法
    handleExceed(){
        this.$Message.error('超出最大上传文件数量的限制！')
        return;
    },
    //移除文件的操作方法
    handleRemove(file,fileList){
        this.fileTemp = null
    },
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader();
      FileReader.prototype.readAsBinaryString = function(f) {
          var binary = "";
          var rABS = false; //是否将文件读取为二进制字符串
          var pt = this;
          var wb; //读取完成的数据
          var outdata;
          var reader = new FileReader();
          reader.onload = function(e) {
              var bytes = new Uint8Array(reader.result);
              var length = bytes.byteLength;
              for (var i = 0; i < length; i++) {
                  binary += String.fromCharCode(bytes[i]);
              }
              //如果没有在main.js中引入，则此处需要引入，用于解析excel
              let XLSX = require("xlsx");
              if (rABS) {
                  wb = XLSX.read(btoa(fixdata(binary)), {
                    //手动转化
                    type: "base64"
                  });
              } else {
                  wb = XLSX.read(binary, {
                    type: "binary"
                  });
              }
              outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 
              let str = '';
              outdata.forEach(v => {
                if(!v.userIds) return;
                str += v.userIds + ','
              });
              str && (str = str.substr(0, str.length-1));
              
              if(_this.ruleData.userIds) {
                let lastStr = _this.ruleData.userIds.charAt(_this.ruleData.userIds.length - 1);
                if(lastStr == ',' || lastStr ==  '，') {
                  str = _this.ruleData.userIds + str
                } else {
                  str = _this.ruleData.userIds + "," + str;
                }
              }
              _this.ruleData.userIds = str;
          };
          reader.readAsArrayBuffer(f);
      };
      if (rABS) {
          reader.readAsArrayBuffer(f);
      } else {
          reader.readAsBinaryString(f);
      }
    }
    }
}
</script>

导出

<template>
           <Button class="export" @click="onExport" :loading="exportLoading">导出Excel</Button>
</template>

<script>
    import {exportXlsx } from '@/utils/util'
export default{
    data(){
        return{
             exportLoading: false, // 导出的loading
        }
    },
    methods:{
        onExport() { // 导出数据.xlsx
             this.exportLoading = true;
            let excelData;
            excelData = [['学员ID', '手机号', '昵称', '观看时长']]; // 文件title
            this.studentData.forEach(v => excelData.push([v.name, v.age, v.address, v.date]));
            exportXlsx(this.studentData, excelData)
        },
    }
}
</script>

util.js

import { Message } from 'iview'
import XLSX from 'xlsx' // 版本   "xlsx": "^0.14.1"

export function s2ab(s) {
    // 字符串转字符流
    let buf = new ArrayBuffer(s.length)
    let view = new Uint8Array(buf)
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
}

export const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : '0' + n
}

export const formatTime = (date, type) => {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    const split = type ? '/' : '-'
    return (
        [year, month, day].map(formatNumber).join(split) +
        ' ' +
        [hour, minute, second].map(formatNumber).join(':')
    )
}
export const formatDate = (date, type) => {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    if (type) {
        return [year, month, day].map(formatNumber).join('/')
    } else {
        return [year, month, day].map(formatNumber).join('-')
    }
}

export function exportXlsx(data, excelData) {
    /**
     * 备注
     * data: 要导出的原始数据  - 数组
     * excelData:导出的xlsx的格式 - 数组
     * 例: excelData = [['学员ID', '手机号', '昵称', '观看时长']] // 导出文件title
            data.forEach(function(item) {
                excelData.push([item.name, item.age, item.address, item.date])
            })
     */
    if (data.length === 0) return Message.error('请先搜索数据')
    let link = document.createElement('a')
    let body = document.querySelectorAll('body')[0]
    body.appendChild(link)
    link.download = formatTime(new Date()) + '.xlsx' // 设置文件名称为导出时间
    const ws = XLSX.utils.aoa_to_sheet(excelData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
    const wbout = XLSX.write(wb, { type: 'binary', bookType: 'xlsx' })
    let tmpDown = new Blob([s2ab(wbout)])
    link.href = URL.createObjectURL(tmpDown)
    link.click()
    setTimeout(function() {
        URL.revokeObjectURL(tmpDown)
        body.removeChild(link)
    }, 100)
}