[JavaScript知识库]vue实现excel的导入导出

首先我们需要下载这几个依赖包

 1. npm install xlsx --save
 2. npm install -S file-saver
 3. npm i xlsx-style //这个是样式的包，如果你不需要调样式可以不下载

以下是我做的小案例

<template>
  <div>
    <div class="heider">
       <el-button type="primary" @click="exportExcel">导出模板</el-button>
    <label for="file">
      <div class="btn">导入Excel</div>
    </label>
    <input type="file" name="file" id="file" ref="file" @change="onChange" />
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="zhiye" label="职业"> </el-table-column>
      <el-table-column prop="shouru" label="收入"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          zhiye: "杀手",
          shouru: 80000,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          zhiye: "老板",
          shouru: 30000,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          zhiye: "律师",
          shouru: 90000,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          zhiye: "码农",
          shouru: 2000,
        },
      ],
    };
  },
  methods: {
    exportExcel() {
      //高质量发展KPI三对标目标数据
      const fdArrayList = this.tableData;
      const fdArray = [];
      fdArrayList.forEach(function (data, index) {
        var obj = {
          日期: data.date,
          姓名: data.name,
          地址: data.address,
          职业: data.zhiye,
          收入: data.shouru,
        };
        fdArray.push(obj);
      });
      // 新建一个excel.xlsx
      var wb = XLSX.utils.book_new();
      // //封装JSON 数据
      var fdXslxws = XLSX.utils.json_to_sheet(fdArray);
      let row = {
        "!cols": [
          { wpx: 160 },
          { wpx: 120 },
          { wpx: 120 },
          { wpx: 120 },
          { wpx: 120 },
          { wpx: 120 },
          { wpx: 160 },
        ],
      };

      XLSX.utils.book_append_sheet(wb, { ...row, ...fdXslxws }, "sheet");
      XLSX.writeFile(wb, "导出模板" + ".xlsx");
      this.$message({
        message: "导出成功",
        type: "success",
      });
    },
    onChange(file) {
      let files = file.target.files[0];
      if (!files) {
        // 如果没有文件
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        try {
          const data = e.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0]; // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
          let tempList = [];
          for (var i = 0; i < ws.length; i++) {
            let sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              date: ws[i]["日期"],
              name: ws[i]["姓名"],
              address: ws[i]["地址"],
              zhiye: ws[i]["职业"],
              shouru: ws[i]["收入"],
            };
            tempList.push(sheetData);
          }
          this.tableData=tempList
          this.$message({
            message: "导入成功",
            type: "success",
          });
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files);
      this.$refs.file.value = "";
    },
  },
};
</script>
<style scoped>
.upFile {
  display: none;
}
#file {
  display: none;
}
.el-button {
  margin-left: 20px;
}
.heider{
  display: flex;
  margin-bottom: 20px;
}
.btn {
  width: 90px;
  height: 34px;
  border: 1px solid rgb(218, 6, 6);
  text-align: center;
  line-height: 34px;
  background: linear-gradient(to bottom, red, rgb(204, 8, 8));
  color: #ffff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 20px;
}
</style>

根据自己的需求进行修改就可以了，初出茅庐，哪里有不足之处，请各位大神指教