最简单的Vue读取excel （.xlsx,.xls）文件数据

最新推荐文章于 2024-07-28 22:48:50 发布

Jarvis Downey

最新推荐文章于 2024-07-28 22:48:50 发布

阅读量756

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_44977477/article/details/107664946

版权

1. 安装组件

cnpm install xlsx --save

2.代码

<template>
  <div class="box_s">
    <el-button type="success" size="mini">
      <label for="int" @click="getFileTi()">↑ 上传</label>
      <input
        id="int"
        type="file"
        ref="clearFile"
        @change="getFile($event)"
        style="margin-left:70px;display: none;"
        accept=".xlsx,.xls"
      />
    </el-button>
  </div>
</template>

<script>
import XLSX from "xlsx";

export default {
  props: {
    type: String,
    default: "选择excel文件",
  },
  name: "",
  data() {
    return {
        XLSX:[]
    };
  },
  created() {},
  methods: {
    getFileTi: function () {},
    getFile(event) {
      var file = event.target.files;
      const inputFile = file[0];
      console.log(inputFile);
      this.exportData(inputFile);
    },
    btnClick() {
      document.querySelector(".input-file").click();
    },
    exportData(f) {
        const that = this
      //   // 拿取文件对象
      // 用FileReader来读取
      var reader = new FileReader();
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var wb; // 读取完成的数据
        var outdata; // 你需要的数据
        var reader = new FileReader();
        reader.onload = function (e) {
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          // 接下来就是xlsx了，具体可看api
          wb = XLSX.read(binary, {
            type: "binary",
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // 自定义方法向父组件传递数据
          console.log("outdata = " + JSON.stringify(outdata));
          that.XLSX = outdata
          console.log(that.XLSX)
          that.$emit("getResult", outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    },
  },
};
</script>

<style lang="scss" scoped>
.input-file {
  display: none;
}
</style>