前端实现excel文件下载与读取

在vue项目中使用 xlsx 实现excel文件的下载与读取、解析

使用 npm或yarn下载 xlsx

// npm

npm install xlsx --save

//yarn

yarn add xlsx

使用 xlsx 实现excl文件的下载

使用 xlsx 的 json_to_sheet 方法

<template>
  <div class="home">
    <el-button @click="downLoadExcel">下载excel</el-button>
  </div>
</template>

<script>

import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      list:[
        {name:'张三',age:23},
        {name:'李四',age:23},
        {name:'王五',age:23},
      ]
    }
  },
  methods:{
    downLoadExcel(){//json数据导出为excel并下载
      let ws_name = "Sheet1";//sheet名称
      let wb = XLSX.utils.book_new();
      //调用json_to_sheet方法
      let ws = XLSX.utils.json_to_sheet(this.list);
      XLSX.utils.book_append_sheet(wb,ws,ws_name);
      //导出excel
      XLSX.writeFile(wb,'excel文件名称.xlsx');
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

读取excel文件内容

使用上传按钮，在用户上传excel文件后对文件内容进行解析

<template>
  <div class="home">
    <el-button @click="downLoadExcel">下载excel</el-button>
    <input type="file" @change="readFile">
    <div class="table">
      <el-table :data="excelData">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import XLSX from 'xlsx'
export default {
  name: 'Home',
  data(){
    return {
      list:[
        {name:'张三',age:23},
        {name:'李四',age:23},
        {name:'王五',age:23},
      ],
      excelData:[],//读取到的excel文件内容
    }
  },
  methods:{
    downLoadExcel(){//json数据导出为excel并下载
      let ws_name = "Sheet1";//sheet名称
      let wb = XLSX.utils.book_new();
      //调用json_to_sheet方法
      let ws = XLSX.utils.json_to_sheet(this.list);
      XLSX.utils.book_append_sheet(wb,ws,ws_name);
      //导出excel
      XLSX.writeFile(wb,'excel文件名称.xlsx');
    },
    readFile(e){//上传文件后读取excel文件内容
      let file = e.target.files[0];
      const types = ["xlsx", "xls"];
      const arr = file.name.split(".");
      //判断文件是否为excel文件
      if (!types.find(item => item === arr[arr.length - 1])) {
        alert('请选择正确的文件类型');
        return;
      }
      let reader = new FileReader();
      //启动函数
      reader.readAsBinaryString(file);
      reader.onload = e => {
        console.log(e);
        //workbook存放excel的所有基本信息
        let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
        //定义sheetList中存放excel表格的sheet表，就是最下方的tab
        let sheetList = workbook.SheetNames;
        //读取文件内容，（第一个sheet里的内容）
        let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],);
        console.log(json);
        this.excelData = json;
      };

    }
  }
}
</script>
<style lang="scss" scoped>

</style>