vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)

59 篇文章 4 订阅
该文章演示了如何在Vue应用中使用xlsx库读取Excel文件,通过FileReader接口读取文件,然后转换为JSON格式,动态生成表格标题和数据,并展示在界面上。同时,提供了上传和导出表格的功能示例。
摘要由CSDN通过智能技术生成
表格内容(本博客演示的表格,这里其实可以更换任意表格,动态展示的)

在这里插入图片描述

安装插件xlsx
npm install xlsx

组件的所有代码(附解释)

<script setup>
import { ref } from "vue";
import * as XLSX from "xlsx";
// 把文件按照二进制进行读取
function readFile(file) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}

const title = ref([]); //表头
const tableData = ref([]); //数据列表

// 选择文件的方法
const handle = async (ev) => {
  //每次选择文件都把之前文件清空
  title.value = [];
  tableData.value = [];
  let file = ev.raw; //这里面就是数据
  //打印的file如图所示:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49f13a6210b44a6390ba0aca5e7a0f6a~tplv-k3u1fbpfcp-watermark.image?
  console.log("file", file);
  // 将file变成二进制读取到的
  let data = await readFile(file);
  // 将得到的二进制转化一下
  let workbook = XLSX.read(data, { type: "binary" });
  //打印的workbook如图所示:https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8587ef9092424bcfb02d75d5513333ef~tplv-k3u1fbpfcp-watermark.image?
  console.log("workbook", workbook); //这里就是可读取的文件了
  // 最后把数据转成json格式的
  let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //这里是表格的名字,这里取第一个表格,1就是第二个表格数据
  //打印的worksheet如图所示:https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3de2e1f5b6c490faadc76604193d0ab~tplv-k3u1fbpfcp-watermark.image?
  console.log("worksheet", worksheet);
  //将得到的worksheet转化为json格式
  data = XLSX.utils.sheet_to_json(worksheet);

  //打印的data如图所示:https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d90617a9e01b4aa99dd577a647b85407~tplv-k3u1fbpfcp-watermark.image?
  console.log("data", data);

  // 这个是表格所有的标题
  for (const key in data[0]) {
    title.value.push(key); //获取的是标题,即每个对象的键名
  }
  //打印的title如图:https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c06321ad03c42ae966f5e5b0ccfbce7~tplv-k3u1fbpfcp-watermark.image?
  console.log("title", title.value);

  //将得到的json数据转化一下(因为excel表格的数据都是汉字,但是我们需要绑定的属性是字母,因此需要转换下)
  // 这种写死了,直接看下面的动态将其进行转化
  // let obj = {
  //   subject: item["项目"],
  //   date: item["周期"],
  //   perple: item["负责人"],
  //   price: item["造价"],
  //   pors: item["人数"],
  // };

  //这种可以动态的根据内容生成表格的英文键
  //对其进行转化目的是为了绑定下面表格的的prop
  data.forEach((item, index) => {
    let obj = {};
    title.value.forEach((item2, index2) => {
      console.log("item", item[item2]);
      obj["in" + index2] = item[item2];
    });
    tableData.value.push(obj);
  });
  //打印的tableData.value如图:https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e919677abf044f4ab96c171a8ad53bc~tplv-k3u1fbpfcp-watermark.image?
  console.log("tableData.value", tableData.value);
};
</script>

<template>
  <div class="">
    <el-upload
      action
      accept=".xlsx,.xls"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handle"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button
        class="ml-3"
        type="success"
        @click="submitUpload"
      >
        提交到服务器(暂时无)
      </el-button>
      <template #tip>
        <div class="el-upload__tip text-red">
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <!-- 上面对中文字段进行转化主要就是为了绑定这个prop -->
            <el-table-column
              v-for="(item, index) in title"
              :key="index"
              :prop="'in' + index"
              :label="item"
              width="180"
            />
          </el-table>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<style scoped lang="scss"></style>
效果图

在这里插入图片描述

上传表格后的效果图

在这里插入图片描述

更换下表格再展示

在这里插入图片描述
在这里插入图片描述

js上传表格(所有代码,不附讲解)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <!-- 引入js-xlsx库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
  </head>
  <body>
    <!-- 选择文件的input -->
    <input
      type="file"
      id="file-input"
      onchange="loadExcelFile()"
    />

    <!-- 展示表格的div -->
    <div id="table-container"></div>

    <script>
      function loadExcelFile() {
        // 获取选择的文件
        const file = document.getElementById("file-input").files[0];

        // 使用FileReader读取文件内容
        const reader = new FileReader();
        reader.onload = function (e) {
          // 解析excel文件内容
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          const sheet = workbook.Sheets[workbook.SheetNames[0]];

          // 将表格展示在网页上
          const htmlTable = XLSX.utils.sheet_to_html(sheet);
          //打印的htmlTable如图:https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e032a1e1b4846ea929710fcb9ffcb9d~tplv-k3u1fbpfcp-watermark.image?
          console.log("htmlTable", htmlTable);
          document.getElementById("table-container").innerHTML = htmlTable;

          //如果想要获得htmlTable表格的内容或者不想显示页面只是单纯想要获得表格内容可以使用以下方法(这个方法就是针对htmlTable内容提取的,展示或者不展示页面不影响提取,传统的方法是展示到页面获得标签后通过innerText获得内容,这个局限性就是必须展示到页面获得标签)
          //不需要提取内容的下面这段可以不用写
          const parser = new DOMParser();
          const doc = parser.parseFromString(htmlTable, "text/html");
          // 获取表格中的所有行
          const rows = doc.querySelectorAll("tr");
          // 遍历所有行并取出其中的文本内容
          rows.forEach((row) => {
            const cells = row.querySelectorAll("td");
            const values = Array.from(cells).map((cell) =>
              cell.textContent.trim()
            );
            //打印的value值如图:https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e039d724d8c248e9a3b14777353908af~tplv-k3u1fbpfcp-watermark.image?
            console.log(values);
          });
        };
        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>
js表格的效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

再加一个带有导出表格的操作(这个是汇总的,既有导入表格又有导出表格)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入js-xlsx库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
</head>

<body>
  <!-- 选择文件的input -->
  <input type="file" id="file-input" onchange="loadExcelFile()" />
  <!-- 导出表格的按钮 -->
  <button onclick="exportTable()">Export Table</button>

  <!-- 展示表格的div -->
  <div id="table-container"></div>

  <script>
    let tableData = [] // Holds the table data

    function loadExcelFile () {
      // 获取选择的文件
      const file = document.getElementById("file-input").files[0]

      // 使用FileReader读取文件内容
      const reader = new FileReader()
      reader.onload = function (e) {
        // 解析excel文件内容
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: "array" })
        const sheet = workbook.Sheets[workbook.SheetNames[0]]

        // 将表格展示在网页上
        const htmlTable = XLSX.utils.sheet_to_html(sheet)
        document.getElementById("table-container").innerHTML = htmlTable

        // 提取表格数据
        const parser = new DOMParser()
        const doc = parser.parseFromString(htmlTable, "text/html")
        const rows = doc.querySelectorAll("tr")

        // 清空之前的数据
        tableData = []

        // 遍历所有行并取出其中的文本内容
        rows.forEach((row) => {
          const cells = row.querySelectorAll("td")
          const values = Array.from(cells).map((cell) =>
            cell.textContent.trim()
          )
          tableData.push(values)
        })
      }
      reader.readAsArrayBuffer(file)
    }

    function exportTable () {
      if (tableData.length === 0) {
        console.log("No table data available.")
        return
      }

      const worksheet = XLSX.utils.aoa_to_sheet(tableData)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      })

      saveAsExcelFile(excelBuffer, "table_data")
    }

    function saveAsExcelFile (buffer, fileName) {
      const data = new Blob([buffer], { type: "application/octet-stream" })
      const url = window.URL.createObjectURL(data)
      const link = document.createElement("a")
      link.href = url
      link.setAttribute("download", fileName + ".xlsx")
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  </script>
</body>

</html>
### 回答1: Vue3 是一种用于构建用户界面的开源JavaScript 框架。它提供了许多功能和工具,使用户能够更轻松地创建可交互、响应式的应用程序。Vue3 采用了一些新的语法和技术,使其在性能和开发效率方面有了明显的改进。 Vite4 是一个基于原生ES模块解析的构建工具。它具有快速冷启动和快速热更新的能力,使开发人员能够更快速地进行开发和调试。与传统的打包工具不同,Vite4 通过在浏览器运行时进行模块解析,避免了不必要的打包和编译步骤,提供了更加流畅的开发体验。 Element Plus 是一个基于Vue3 的组件库,提供了丰富的UI组件和交互式工具,可以帮助开发人员快速构建出现代化的Web界面。Element Plus 是Element UI 的升级版,针对Vue3 进行了优化和改进,提供了更好的性能和更丰富的功能。 TypeScript 是一种强类型的JavaScript 超集,允许开发人员在JavaScript 代码中添加静态类型注解。这样可以在开发过程中提早发现错误并提供更好的代码提示。Vue3 通过与TypeScript 的集成,使开发人员能够使用类、接口、泛型等高级特性来构建更健壮的应用程序。 综上所述,Vue3、Vite4、Element Plus 和 TypeScript 的结合,可以提供一个高效、灵活和强大的开发环境。开发人员可以利用Vite4 的快速构建能力和热更新功能,结合Element Plus 提供的丰富组件,通过TypeScript 的类型检查和提示,更加轻松地构建出现代化的Vue 应用程序。 ### 回答2: Vue 3 是一款非常流行的 JavaScript 框架,用于构建现代化的用户界面。它的核心思想是组件化开发,通过将界面拆分成独立的组件,使开发者能够更好地管理和重用代码。 Vite 4 是 Vue 3 的一个新型构建工具,用于快速构建现代化的前端应用。相比传统的打包工具,Vite 4 支持开箱即用的单文件组件,可以进行更快的热重载和快速启动,从而提高开发效率。 Element Plus 是一套基于 Vue 3 的UI组件库,它提供了大量的高质量的组件,可以用于构建漂亮、响应式的用户界面。Element Plus 的组件易于使用,灵活且高度可定制,适合开发各种类型的应用。它还提供了强大的工具和样式库,使开发者能够更轻松地定制和管理应用的外观和风格。 TypeScript 是一个强类型的 JavaScript 超集,它为开发者提供了更强大的类型检查和代码提示功能。与 JavaScript 不同,TypeScript 在编码过程中能够捕获一些常见的错误,帮助开发者提高代码的质量和可维护性。TypeScript 还支持最新的 JavaScript 特性,并且可以与 Vue 3、Vite 4 和 Element Plus 等工具和库完美集成。 综合上述所述,结合 Vue 3、Vite 4、Element Plus 和 TypeScript 可以实现一种高效、可维护和易于定制的开发方式。开发者可以使用 Vite 4 快速创建 Vue 3 项目,同时借助 Element Plus 的丰富组件库来构建出漂亮的用户界面。而 TypeScript 则提供了更强大的类型检查和代码提示,避免一些潜在的bug,提高开发效率。通过组合使用这些工具和库,可以实现更快速、更可靠的前端开发体验。 ### 回答3: Vue3是一种流行的JavaScript框架,它具有响应式和组件化的特性,使开发者可以轻松构建现代化的Web应用程序。Vite4是Vue3的一个新的构建工具,旨在提供更快的启动和热重载,以及更好的开发体验。 Element Plus是一个基于Vue3的UI库,它提供了一套美观、易用和高性能的组件,用于构建优雅的用户界面。它使用了TypeScript来提供类型检查和智能提示,这使得在使用Element Plus时能更加轻松地进行开发。 TypeScript是一种由微软开发的编程语言,它是JavaScript的超集,添加了静态类型支持。它允许开发者在编写代码时进行类型检查,并提供了更好的代码补全和智能感知功能。在Vue3和Element Plus使用TypeScript可以提高代码的可读性和可维护性,并减少错误和调试时间。 综上所述,Vue3、Vite4、Element Plus和TypeScript是一组强大的工具和库,可以帮助开发者更快速、高效地构建现代化的Web应用程序。它们的结合提供了优秀的开发体验,并能够轻松满足各种UI需求。无论是构建大型企业应用还是小型个人项目,它们都是很好的选择。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值