上传Execl并转为js的对象数组

引入方式:

CDN:

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

NPM:

npm install xlsx

vue 使用样例

将文件上传与将Excel数据转换为对象数组配合使用,可以实现在前端上传Excel文件并将数据显示在页面上的功能。

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" />
    <table>
      <thead>
        <tr>
          <th v-for="header in headers">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="cell in row">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      headers: [],
      rows: []
    };
  },
  methods: {
    onFileChange(e) {
      // 获取上传的文件
      const file = e.target.files[0];

      // 读取Excel文件
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 将Excel数据转换成对象数组
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 设置表头和数据
        this.headers = jsonData[0];
        this.rows = jsonData.slice(1);
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容