vue js-xlsx导入导出excel文件Demo

简单的Demo，用的xlsx插件，实际使用中别忘了做各种异常的处理。粘贴即用。

npm install xlsx

<template>
  <div>
    <input type="file" accept=".xls,.xlsx" @change="readExcel" value="导入excel">
    <button @click="exportExcel">导出excel</button>
  </div>
</template>

<script>
  import XLSX from 'xlsx'
  export default {
    name: 'Test',
    data() {
      return {
        excelData: // 导出excel的数据
          [{
              "姓名": "依依",
              "性别": "男",
              "年龄": "25",
              "学校": "自学",
            },
            {
              "姓名": "哈哈",
              "性别": "男",
              "年龄": "18",
              "学校": "蓝翔技校",
            },
            {
              "姓名": "嘻嘻",
              "性别": "女",
              "年龄": "22",
              "学校": "清华",
            },
            {
              "姓名": "哦哦",
              "性别": "男",
              "年龄": "30",
              "学校": "新东方",
            }
          ]
      }
    },
    methods: {
      readExcel(e) {
        const files = e.target.files;
        const fileReader = new FileReader(); // 可读取文件内容的构建函数
        fileReader.onload = ev => {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary" // 二进制
          });
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取这张表里的数据
          ws.forEach((value, index, ws) => {
            console.log(value) // 每一行的数据
          })
        };
        fileReader.readAsBinaryString(files[0]); // 读取文件，触发onload
      },
      exportExcel() {
        const jsonWorkSheet = XLSX.utils.json_to_sheet(this.excelData);
        const workBook = {
          SheetNames: ['jsonWorkSheet'], // 表名
          Sheets: {
            'jsonWorkSheet': jsonWorkSheet,
          }
        };
        XLSX.writeFile(workBook, "test.xlsx");
      }
    }
  };
</script>