1. /**
  2. * @description: 导入excel并进行数据提取
  3. * @param {type}
  4. * @return:
  5. */
  6. Vue.prototype.$importExcel = function (file, header) {
  7. let _this = this;
  8. return new Promise(function (resolve, reject) {
  9. const types = file.name.split('.')[1]
  10. const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
  11. if (!fileType) {
  12. _this.$message({
  13. type: "warning",
  14. message: "文件格式不正确,请重新选择!"
  15. });
  16. reject();
  17. }
  18. const reader = new FileReader();
  19. reader.onload = function (e) {
  20. const data = e.target.result;
  21. this.wb = XLSX.read(data, {
  22. type: "binary"
  23. });
  24. const wsname = this.wb.SheetNames[0];
  25. const ws = this.wb.Sheets[wsname];
  26. /* Convert array of arrays */
  27. const sheetJson = XLSX.utils.sheet_to_json(ws);
  28. let tableData = []; //转换为真正的table所需要的数据
  29. for (let item of sheetJson) {
  30. let obj = {};
  31. for (let key in item) {
  32. for (let childItem of _this.header) {
  33. if (key === childItem.label) {
  34. obj[childItem.prop] = item[key];
  35. break;
  36. }
  37. }
  38. }
  39. tableData.push(obj);
  40. }
  41. resolve(tableData);
  42. };
  43. reader.readAsBinaryString(file.raw);
  44. });
  45. }

  

  1. <template>
  2. <div>
  3. <el-upload
  4. class="upload-demo"
  5. ref="upload"
  6. :auto-upload="false"
  7. :on-change="change"
  8. >
  9. <el-button
  10. style="margin-left: 10px;"
  11. size="small"
  12. type="success"
  13. @click="submitUpload"
  14. >上传到服务器</el-button>
  15. </el-upload>
  16. </div>
  17. </template>
  18. <script>
  19.  
  20. </script>
  21. import XLSX from "xlsx";
  22. export default {
  23. methods: {
  24. submitUpload() {
  25. this.$refs.upload.submit();
  26. },
  27. change(file) {
  28. this.$importExcel(file, this.header).then(tableData => {
  29. console.log(tableData);
  30. });
  31. },
  32. }
  33. }

  

导入excel并进行数据提取的更多相关文章

  1. MySQL批量导入Excel、txt数据

    MySQL批量导入Excel.txt数据 我想Excel是当今最大众化的批量数据管理软件了吧,所以我们会经常涉及到将Excel中数据导入到MySQL中的工作.网上有一些关于直接将Excel导入MySQ ...

  2. PLSQL导入Excel表中数据

     PL/SQL 和SQL Sever导入excel数据的原理类似,就是找到一个导入excel数据的功能项,按照步骤走就是了.下面是一个些细节过程,希望对像我这样的菜鸟有帮助.  www.2cto.co ...

  3. 使用PHP导入Excel和导出数据为Excel文件

    有时需要将Excel表格的数据导入到mysql数据库中,我们使用PHP的一个开源项目PHP-ExcelReader可以轻松实现Excel的导入.另外将mysql数据导出为Excel与本站上篇文章中导出 ...

  4. 导入Excel 类型的数据

    thinkphp 访问此控制方法就可以导入了 //数据导入 public function impUser(){ if (!empty($_FILES)) { $upload = new \Think ...

  5. C# 各种导入 Excel 文件的数据的方法总结

    在导入之前都需要将上传的文件保存到服务器,所以避免重复的写这些代码,先贴出上传文件并保存到服务器指定路径的代码. protected void btnImport_Click(object sende ...

  6. C#各种导入Excel文件的数据的方法总结

    在导入前都需要将上传的文件保存到服务器,所以避免重复的写这些代码,先贴出上传文件并保存到服务器指定路径的代码 protected void btnImport_Click(object sender, ...

  7. oracle导入Excel表文本数据

    首先导Excel表数据要先建和Excel表字段对应的表,然后将Excel表另存为Txt文本, 然后在Plsql客户端点击工具->文本导入器 然后这里要选择用户及其表,点击导入数据就可以

  8. Sql Server数据库导入Excel、txt数据详解,新人必看

    转自个人原创 https://blog.csdn.net/qq_15170495/article/details/104591606 数据库的要想导入数据,列的映射很是关键,只有列名匹配好,系统才知道 ...

  9. Asp.net导入Excel并读取数据

    protected void Button1_Click(object sender, EventArgs e) { if (station.HasFile == false)//HasFile用来检 ...

随机推荐

  1. sqlserver 调优(二)

    良好的系统和数据库设计,优质的SQL编写,合适的数据表索引设计,甚至各种硬件因素:网络性能.服务器的性能.操作系统的性能,甚至网卡.交换机等.这篇文章主要讲到如何改善SQL语句,还将有另一篇讨论如何改 ...

  2. Aizu - ALDS1_13_A-8 Queens Problem-八皇后的路径输出

    The goal of Queens Problem is to put eight queens on a chess-board such that none of them threatens ...

  3. PAT_A1086#Tree Traversals Again

    Source: PAT A1086 Tree Traversals Again (25 分) Description: An inorder binary tree traversal can be ...

  4. day 90 跨域和CORS

    跨域和CORS   本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定,它是 ...

  5. 剑指offer——11旋转数组中最小的数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  6. 采用多个数据源是Spring的配置

    XML配置多多源文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  7. pycharm快捷键表

    快捷键 作用 ctrl(command)+c 复制 ctrl+v 粘贴 ctrl+z 撤销 ctrl+x 剪切,默认整行 ctrl+a 全选 ctrl+f 查找:选中批量修改 shift+ctrl+z ...

  8. 数组模拟stack

    package com.cxy.springdataredis.data; import java.util.Scanner; public class StackDemo { public stat ...

  9. ES6 学习 -- let const

    看过很多大佬的ES6笔记,总结一下学习后的收获,给自己当作一个笔记用用: ES3.ES5定义变量有两种方法:var 和 function ES6定义变量有var.function.let.const等 ...

  10. sikuli+eclipse对于安卓app自动化测试的应用(第一次写博客,有些语言还不太专业,望海涵)

    Sikuli是什么? 下面是来自于官网的介绍:Sikuli is a visual technology to automate and test graphical user interfaces ...