美文网首页
上传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