vue上传excel

最新推荐文章于 2024-08-23 10:33:18 发布
最新推荐文章于 2024-08-23 10:33:18 发布
阅读量415 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Programmerwhite/article/details/113091467
版权

参考https://blog.csdn.net/qq_34462220/article/details/108741345

在原基础上进行了改进

npm install xlsx -s

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2021-01-24 14:32:25
 * @LastEditTime: 2021-01-24 19:25:28
 * @Descripttion: 
-->
<template>
  <div>
    <!--  excel表格上传  -->
    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      accept=".xlsx"
      :on-exceed="exceed"
      :limit="1"
      :on-remove="remove"
      :http-request="uploadFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        1次只能上传1个xls文件，且不超过500kb
      </div>
    </el-upload>
    <!--  上传的excel表格预览  -->
    <div class="preview-excel">
      <el-table
        class="listTable_ele"
        v-show="listTable.length != 0"
        :data="listTable"
        stripe
        height="250"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="姓名"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sno"
          label="学号"
          width="200"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
import XLSX from "xlsx"; //引入xlsx
export default {
  data() {
    return {
      listTable: [],
    };
  },
  methods: {
    //解析excel
    async uploadFile(params) {
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            //若当前sheet没有数据，则continue
            if (sheetArray.length == 0) {
              continue;
            }
            console.log("读取文件");
            console.log(sheetArray);
            for (let item in sheetArray) {
              let rowTable = Object.assign(
                {},
                {
                  name: sheetArray[item].姓名,
                  age: sheetArray[item].年龄,
                  city: sheetArray[item].城市,
                  sno: sheetArray[item].学号,
                }
              );
              this.listTable.push(rowTable);
            }
            this.listTable = this.listTable.filter((item) => item.name);
            console.log(this.listTable, "1sacsdjbcjsd");
          }
        } catch (e) {
          this.$message.warning("文件类型不正确！");
        }
      };
      fileReader.readAsBinaryString(_file);
    },
    //上传1个以上文件时弹窗提示错误
    exceed: function () {
      this.$message.error("最多只能上传1个xls文件");
    },
    //删除文件
    remove() {
      this.listTable = [];
    },
  },
};
</script>

在这里插入图片描述

ts版本

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2021-01-24 14:32:25
 * @LastEditTime: 2021-01-25 17:54:31
 * @Descripttion: 
-->
<template>
  <div>
    <!--  excel表格上传  -->
    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      accept=".xlsx"
      :on-exceed="exceed"
      :limit="1"
      :on-remove="remove"
      :http-request="uploadFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip">1次只能上传1个xls文件，且不超过500kb</div>
    </el-upload>
    <!--  上传的excel表格预览  -->
    <div class="preview-excel">
      <el-table
        class="listTable_ele"
        v-show="listTable.length != 0"
        :data="listTable.listTable"
        stripe
        height="250"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="姓名"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sno"
          label="学号"
          width="200"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, reactive } from "vue";
import XLSX from "xlsx"; //引入xlsx
interface ListTable {
  name: string;
  age: number;
  city: string;
  sno: string;
}
interface ListTable2 {
  姓名: string;
  年龄: number;
  城市: string;
  学号: string;
}
export default defineComponent({
  setup() {
    let listTable = reactive({
      listTable: new Array<ListTable>(),
    });
    //解析excel
    let uploadFile = async (params: { file: any }) => {
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev: any): void => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray: Array<ListTable2> = XLSX.utils.sheet_to_json(
              workbook.Sheets[sheet]
            );
            //若当前sheet没有数据，则continue
            if (sheetArray.length == 0) {
              continue;
            }
            console.log("读取文件");
            console.log(sheetArray);
            for (let item in sheetArray) {
              let rowTable: ListTable = Object.assign(
                {},
                {
                  name: sheetArray[item].姓名,
                  age: sheetArray[item].年龄,
                  city: sheetArray[item].城市,
                  sno: sheetArray[item].学号,
                }
              );
              listTable.listTable.push(rowTable);
            }
            listTable.listTable = listTable.listTable.filter(
              (item) => item.name
            );
            console.log(listTable.listTable, "1sacsdjbcjsd");
          }
        } catch (e) {
          // this.$message.warning("文件类型不正确！");
        }
      };
      fileReader.readAsBinaryString(_file);
    };
    //上传1个以上文件时弹窗提示错误
    let exceed = (): void => {
      // this.$message.error("最多只能上传1个xls文件");
    };
    //删除文件
    let remove = (): void => {
      listTable.listTable = [];
    };
    return {
      listTable,
      uploadFile,
      remove,
      exceed,
    };
  },
});
</script>

做成一个弹框组件

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2021-01-24 14:32:25
 * @LastEditTime: 2021-01-28 15:51:31
 * @Descripttion: 
-->
<template>
  <el-dialog
    title="导入"
    :visible.sync="exportExcelBoolean"
    width="60%"
    center
    :show-close="!exportExcelBoolean"
    :close-on-click-modal="!exportExcelBoolean"
  >
    <div class="export_Excel">
      <!--  excel表格上传  -->
      <el-upload
        v-if="listTable.length == 0"
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        accept=".xlsx"
        :on-exceed="exceed"
        :limit="1"
        :on-remove="remove"
        :http-request="uploadFile"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          1次只能上传1个xls文件，且不超过500kb
        </div>
      </el-upload>
    </div>
     <!--  上传的excel表格预览  -->
      <div class="preview-excel">
        <el-table
          class="listTable_ele"
          v-show="listTable.length != 0"
          :data="listTable"
          stripe
          height="300"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="城市"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sno"
            label="学号"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="exportExcelDialogCancal">取 消</el-button>
      <el-button type="primary" @click="exportExcelDialogConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
 
<script>
import XLSX from "xlsx"; //引入xlsx
export default {
  props:{exportExcelBoolean:Boolean},
  data() {
    return {
      listTable: [],
    };
  },
  methods: {
    //取消按钮
    exportExcelDialogCancal(){
      this.$emit('exportExcelDialogBool');
      this.listTable = [];
    },

    //确定按钮
    exportExcelDialogConfirm(){
       //此处调接口   把数据  -- this.listTable  --传给后台 ,  返回成功 调用exportExcelDialogCancal()方法 
       alert("此处调接口")
    },
    //解析excel
    async uploadFile(params) {
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            //若当前sheet没有数据，则continue
            if (sheetArray.length == 0) {
              continue;
            }
            for (let item in sheetArray) {
              let rowTable = Object.assign(
                {},
                {
                  name: sheetArray[item].姓名,
                  age: sheetArray[item].年龄,
                  city: sheetArray[item].城市,
                  sno: sheetArray[item].学号,
                }
              );
              this.listTable.push(rowTable);
            }
            this.listTable = this.listTable.filter((item) => item.name);
          }
        } catch (e) {
          this.$message.warning("文件类型不正确！");
        }
      };
      fileReader.readAsBinaryString(_file);
    },
    //上传1个以上文件时弹窗提示错误
    exceed: function () {
      this.$message.error("最多只能上传1个xls文件");
    },
    //删除文件
    remove() {
      this.listTable = [];
    },
  },
};
</script>

<style lang="scss" scope>
</style>
一天28小时
关注
Vue 中实现 excel文件上传功能
_夜渐凉
01-25 2万+
场景：上传excel表，并将excel表中的数据构建成实体 &lt;div class="pull-right" v-if="doc"&gt; &lt;el-upload class="upload-demo" ...
vue上传excel zip模态框
买不起冰露的博客
03-01 174
【代码】vue上传excel zip模态框。
vue上传excel文件
AOOOOO李
08-18 1541
vue上传 excel文件
vue3项目，批量上传excel文件，然后读取excel中内容
最新发布
jyl4855的博客
08-23 406
上传区域：使用 组件创建了一个文件上传区域，允许用户选择文件，但限制了最大文件数量，并指定了接受的文件类型为 格式的 Excel 文件。 函数定义： 函数接收一个参数 ，这个参数代表要读取的 Excel 文件。返回 Promise：函数返回一个新的 Promise 对象，这使得函数可以异步执行并处理完成后的结果。创建 FileReader 对象：创建一个 对象，用于读取文件内容。读取文件：使用 方法读取文件，这会将文件内容作为二进制字符串读入。处理文件加载事件：当文件加载完成时，触发 事件
vue实现Excel文件的上传与下载功能的两种方式
12-29
一.前言项目中使用到比较多的关于Excel的前端上传与下载，整理出来，以便后续使用或分析他人。 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件，点击导入按钮可调用子组件，打开文件上传的对话框，上传成功后返回结果 <el xss=removed> <el class=pull-right icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
vue之 上传 excel文件
weixin_47409897的博客
06-09 3184
一个上传 excel的文件功能
excel表格上传
爱蹦哒的咸鱼的博客
02-24 2155
excel表格上传
vue上传excel并展示_vue实战(15)——基于Element上传Excel读取内容
weixin_34355360的博客
12-29 942
image.png1、应用场景大多数管理后台很多情况会有批量上传数据的业务，用的最多的要数Excel上传，根据不同的业务场景有两种上传方式：对于数据量很大的情况，需要后端提供上传的接口，像上传图片视频一样，数据解析和提取都由后端来处理，表格内容不太多的情况下单次10000条以上(单次上传量还要根据自己的项目情况而定)一般会选择这种方式，数据量太大浏览器读取的速度远远小于服务端读取对于数据量不太大的...
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this....
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
使用Vue+Spring Boot实现Excel上传功能
08-26
使用Vue+Spring Boot实现Excel上传功能 在本文中，我们将介绍如何使用Vue+Spring Boot实现Excel上传功能。该功能主要由两个部分组成：前端部分使用Vue实现Excel上传，后端部分使用Spring Boot处理上传的Excel文件。...
使用vue实现excel导入和导出功能
11-09
直接上代码，使用vue实现表格excel的导入功能，使用vue实现表格excel的导出功能
Vue导入上传Excel
兔子的博客
12-27 3229
对Excel的数据进行上传首先需要使用xlsx 此文章的上传方式为手动上传（数据解析可在前端进行，也可交由后端处理） 安装插件 npm install xlsx 引入 import XLSX from ‘xlsx’ 使用el-upload进行上传 （el-upload在这不再做介绍） <el-upload :show-file-list="true" :headers="{ Authorization: token }"
vue如何实现上传excel表格并直接展示excel表格
BradenHan的专栏
06-27 915
TOC/TOC。
vue前端导入excel表格并解析表格内数据
十二点的洛杉矶的博客
10-29 2728
需求 用户需要输入一系列的ip 1.如果ip过多手动输入太麻烦，所以用户可以把ip写入Excel表格,然后导入 2.为防止用户创建Excel表格时格式错误，所以我们提供一个模板供下载
vue2 - 基于Element UI实现上传Excel表单数据功能
背心的博客
11-24 4409
vue2 - 基于 Element UI实现上传Excel表单数据功能
vue实现Excel文件的上传与下载
weixin_30332705的博客
06-28 548
参考：https://www.cnblogs.com/wnxyz8023/p/11101771.html 转载于:https://www.cnblogs.com/Samuel-Leung/p/11102059.html
Vue实现Excel表格上传解析与导出
BradenHan的专栏
06-28 966
TOC/TOC。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值