【知识整理】vue使用js-xlsx读取excel数据

vue.js中使用js-xlsx

引入

1.安装xlsx: npm install xlsx
2.main.js中引入：import XLSX from ‘xlsx/dist/xlsx.full.min’
3.要使用的页面引入：import XLSX from “xlsx”

代码

<template>
  <div class="excel-wrap" id="excelWrap">
    <!-- 上传input -->
    <input type="file" accept=".xlsx, .xls" @change="changeFile" id="fileInput" />
    <!-- 显示excel表格的区域 -->
    <div id="result" contenteditable></div>
    <!-- 显示工作表的按钮 -->
    <div id="buttons"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import XLSX from "xlsx";
export default {
  components: {},
  data() {
    return {
      defaultIndex: 0, // 默认显示第一个工作表
      wb: null // 工作表对象
    };
  },
  methods: {
    // 文件上传
    changeFile(ev) {
      // console.log('file: ', ev.target.files[0]);
      let f = ev.target.files[0],
      reader = new FileReader();
      reader.onload = e => {
        let data = e.target.result;
        console.log("data: ", data);
        this.wb = XLSX.read(data, { type: "array" });
        console.log("wb: ", this.wb);
        // let wbbase64 = XLSX.read(data, { type: "base64" });
        // console.log("wb: ", wbbase64);
        // let wbbinary = XLSX.read(data, { type: "binary" });
        // console.log("wb: ", wbbinary);
        // let wbstring = XLSX.read(data, { type: "string" });
        // console.log("wb: ", wbstring);
        // let wbbuffer = XLSX.read(data, { type: "buffer" });
        // console.log("wb: ", wbbuffer);

        // this.$refs.demo.innerHTML = JSON.stringify(
        //   XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        // );
        // let jsonData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        // console.log("jsonData: ", jsonData);
        var sheetNames = this.wb.SheetNames; // 工作表名称集合
        this.makeButtons(sheetNames);
        var worksheet = this.wb.Sheets[sheetNames[this.defaultIndex]]; // 这里我们只读取第一张sheet
        var csv = XLSX.utils.sheet_to_csv(worksheet);
        console.log("csv: ", csv);
        // document.getElementById("result").innerHTML = this.csv2table(csv);
        var txt = XLSX.utils.sheet_to_txt(worksheet);
        console.log("txt: ", txt);
        var html123 = XLSX.utils.sheet_to_html(worksheet);
        console.log("html123: ", html123);
        var json = XLSX.utils.sheet_to_json(worksheet);
        console.log("json: ", json);
        document.getElementById("result").innerHTML = html123;
       
      };
      reader.readAsArrayBuffer(f);
    },
    // 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
    csv2table(csv) {
      var html = "<table>";
      var rows = csv.split("\n");
      rows.pop(); // 最后一行没用的
      rows.forEach(function(row, idx) {
        var columns = row.split(",");
        columns.unshift(idx + 1); // 添加行索引
        if (idx == 0) {
          // 添加列索引
          html += "<tr>";
          for (var i = 0; i < columns.length; i++) {
            html +=
              "<th>" +
              (i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
              "</th>";
          }
          html += "</tr>";
        }
        html += "<tr>";
        columns.forEach(function(column) {
          html += "<td>" + column + "</td>";
        });
        html += "</tr>";
      });
      html += "</table>";
      return html;
    },
    // 生成下面工作表按钮，并且添加点击事件
    makeButtons(sheetnames) {
      var buttons = document.getElementById("buttons");
      buttons.innerHTML = "";
      sheetnames.forEach(function(s, idx) {
        var btn = document.createElement("button");
        btn.type = "button";
        btn.name = "btn" + idx;
        btn.text = s;
        var txt = document.createElement("span");
        txt.innerText = s;
        btn.appendChild(txt);
        const self = this;
        btn.addEventListener(
          "click",
          function(self) {
            var excelWrap = document.getElementById("excelWrap");
            excelWrap.__vue__.selectSheet(idx);
          },
          false
        );
        buttons.appendChild(btn);
      });
    },
    // 选择工作表的按钮，切换对应工作表的内容
    selectSheet(num) {
      this.defaultIndex = num;
      console.log(this.wb);
      var sheetNames = this.wb.SheetNames; // 工作表名称集合
      var worksheet = this.wb.Sheets[sheetNames[this.defaultIndex]]; // 这里我们只读取第一张sheet
      var csv = XLSX.utils.sheet_to_csv(worksheet);
      console.log("csv: ", csv);
      // document.getElementById("result").innerHTML = this.csv2table(csv);
      var txt = XLSX.utils.sheet_to_txt(worksheet);
      console.log("txt: ", txt);
      var html123 = XLSX.utils.sheet_to_html(worksheet);
      console.log("html123: ", html123);
      var json = XLSX.utils.sheet_to_json(worksheet);
      console.log("json: ", json);
      document.getElementById("result").innerHTML = html123;
    },
  },
};
</script>

简单demo展示

上述代码可以实现，上传excel表格，展示excel表格中的内容，同时点击下面的sheet工作表的按钮，可以切换不同sheet里面的内容。

参考的文章

• SheetJS In-Browser Live Grid Demo
• 如何使用JavaScript实现纯前端读取和导出excel文件
• JavaScript读取和导出excel示例（基于js-xlsx）
• [SheetJS] js-xlsx模块学习指南
• vue-使用js-xlsx读取excel数据（二）
• vue.js中使用js-xlsx读取excel
• SheetJS JS-XLSX In-Browser HTML Table Export Demo
• SheetJS/js-xlsx