美文网首页
上传Execl并转为js的对象数组

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

作者: 会爬虫的小蟒蛇 | 来源:发表于2023-04-01 01:20 被阅读0次

引入方式:

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>

相关文章

网友评论

      本文标题:上传Execl并转为js的对象数组

      本文链接:https://www.haomeiwen.com/subject/ckdkddtx.html