vue使用xlsx导入到表格中代码

以下是使用xlsx导入表格的代码示例:

  1. 安装依赖包

    npm install xlsx -S

  2. 引入xlsx和vue-xlsx

js 复制代码
import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";
  1. 在Vue组件中使用VueXlsx
vue 复制代码
<template>
  <div>
    <input type="file" @change="uploadFile">
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, idx) in row" :key="idx">{{ cell }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import * as XLSX from "xlsx";
import VueXlsx from "vue-xlsx";

export default {
  components: {
    VueXlsx,
  },
  data() {
    return {
      rows: [],
      columns: [],
    };
  },
  methods: {
    uploadFile(event) {
      const input = event.target;
      const reader = new FileReader();
      reader.onload = async () => {
        const data = reader.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        this.rows = json;
      };
      reader.readAsBinaryString(input.files[0]);
    },
  },
};
</script>

这个示例代码实现了一个简单的表格,用户可以通过选择Excel文件上传,然后表格会自动填充。具体实现是先通过FileReader将上传的文件读取为二进制数据,然后使用xlsx将它解析成JSON数据,最后将JSON数据填充到表格中。

相关推荐
广州华水科技1 分钟前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
打小就很皮...13 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
JAVA学习通18 分钟前
OJ竞赛平台----C端题目列表
java·开发语言·jvm·vue.js·elasticsearch
IT_陈寒22 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit33 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢34 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯1 小时前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
麦麦大数据1 小时前
F025 基于知识图谱图书可视推荐系统 vue+flask+neo4j | python编写、知识图谱可视化+推荐系统
vue.js·python·知识图谱·推荐算法·协同过滤·图书推荐
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
用户352120195601 小时前
React-router v7
前端