详解如何实现在Vue中导入Excel文件

目录
  • 一、安装依赖
  • 二、template中
  • 三、script中js代码

以将此Excel导出为json数据为例

一、安装依赖

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

二、template中

<span>导入表格</span>
<input id="upload" type="file" @change="importfxx()"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

三、script中js代码

methods:{
   // 处理导入Excel中日期问题
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1);
      time.setYear(time.getFullYear() - 70);
      const year = time.getFullYear() + "";
      const month = time.getMonth() + 1 + "";
      const date = time.getDate() - 1 + "";
      if (format && format.length === 1) {
        return year + format + month + format + date;
      }
      return (
        year +
        (month < 10 ? "0" + month : month) +
        (date < 10 ? "0" + date : date)
      );
    },

    // 导入Excel
    importfxx() {
      let _this = this;
      let f = event.currentTarget.files[0];
      let rABS = false; //是否将文件读取为二进制字符串

      let reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        let binary = "";
        let rABS = false; //是否将文件读取为二进制字符串
        let wb; //读取完成的数据
        let outdata;
        let reader = new FileReader();
        reader.onload = function (e) {
          let bytes = new Uint8Array(reader.result);
          let length = bytes.byteLength;
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西

          const keyObj = {
            序号: "id",
            情况跟踪: "track",
            日期: "date",
            标题: "title",
            状态: "status",
            结果: "result",
            预警: "warning",
          };

          outdata.forEach((item) => {
            // 将中文的键名替换成英文的
            for (let k in keyObj) {
              let newKey = keyObj[k];
              if (newKey) {
                item[newKey] = item[k];
                delete item[k];
              }
            }
            item["date"] = _this.formatDate(item["date"], "-");
          });
          console.log(outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
}

如上操作之后,打印结果是如下

到此这篇关于详解如何实现在Vue中导入Excel文件的文章就介绍到这了,更多相关Vue导入Excel文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Vue实现Excel解析与导出功能详解

    目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页

  • Vue实现导入Excel功能步骤详解

    1.前端主导实现步骤 第一步,点击页面上的导入按钮,读入Excel文件 利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式 需要自己写逻辑. 第三步,通过后端接口,将数据通过ajax发回去 调接口,常规操作. 简而言之:前端读excel文件,修改文件格式,调接口 2.实现读入Excel文件 注:此步骤就可实现前端导入功能.如对修改格式有兴趣,可以继续看第三步. 概括:复制代码到自己的文件夹下,下载必需的插件. 2.1 使用的是elementUI提供的vue-admin-el

  • Vue导入excel表,导入失败的数据自动下载

    有这么一个需求:一个导入按钮,点击按钮导入excel表,如果excel表中部分数据导入失败,则自动下载该部分导入失败数据的excel表,如果全部导入成功,则提示"导入成功". 首先附上ElementUI的上传文件组件 Element - The world's most popular Vue UI framework Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.cn/#/zh-CN/compon

  • Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • Vue导出Excel功能的全过程记录

    目录 1.前端主导流程: 2. 插件使用及初始化 2.1  借助vue-admin中提供的方法. 2.2  安装插件依赖. 2.3  回调函数内容如下 3.对后台数据进行处理,完成想要的效果 3.1  准备一个数据处理函数(最后会在回调里面使用) 3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文 3.3  定义表头 3.4  要处理后台返回数据 3.5   表头处理逻辑 3.6 表格data处理逻辑 3.7 函数返回 3.8 最终完成 总结: 1.前端主导流程: 1.点击页面中

  • vue引入Excel表格插件的方法

    本文实例为大家分享了vue引入Excel表格插件的具体代码,供大家参考,具体内容如下 一.安装 npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue 二.引用(在页面引用) import { HotTable } from '@handsontable-pro/vue' import '-/-/node_modules/handsontable-pro/dist/

  • 详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • 详解pandas库pd.read_excel操作读取excel文件参数整理与实例

    除了使用xlrd库或者xlwt库进行对excel表格的操作读与写,而且pandas库同样支持excel的操作:且pandas操作更加简介方便. 首先是pd.read_excel的参数:函数为: pd.read_excel(io, sheetname=0,header=0,skiprows=None,index_col=None,names=None, arse_cols=None,date_parser=None,na_values=None,thousands=None, convert_fl

  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法 通过全局安装vue-cli npm install --global vue-cli 在cmd中运行vue提示不是内部命令,原因是环境变量没有加上 找到npm的位置:(不在这个位置的全局搜索vue.cmd即可) C:\Users\Administrator\AppData\Roaming\npm 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置,保存,重启cmd命令工具即可

  • 详解如何在Android Studio中添加RecyclerView-v7支持包

    一直知道RecyclerView可以代替ListView.GridView使用,听说功能很强大,但还没有去学习过.今天想学习,没想到还没开始便撞墙了.输入Recycler,只有这两个东西,没有提示RecyclerView,说明支持包中没有. 最后一番百度后,终于解决(真不敢想象没有网络的情况下,怎么开发.怎么解决问题). 1.打开SDK Manager,在Extras树下找到Android Support Library,下载好支持包.RecyclerView在v7-21版本就出来了.我这里不用

  • 详解C++调用Python脚本中的函数的实例代码

    1.环境配置 安装完python后,把python的include和lib拷贝到自己的工程目录下 然后在工程中包括进去 2.例子 先写一个python的测试脚本,如下 这个脚本里面定义了两个函数Hello()和_add().我的脚本的文件名叫mytest.py C++代码: #include "stdafx.h" #include <stdlib.h> #include <iostream> #include "include\Python.h&quo

  • 详解Typescript 内置的模块导入兼容方式

    一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

  • 详解Python数据结构与算法中的顺序表

    目录 0. 学习目标 1. 线性表的顺序存储结构 1.1 顺序表基本概念 1.2 顺序表的优缺点 1.3 动态顺序表 2. 顺序表的实现 2.1 顺序表的初始化 2.2 获取顺序表长度 2.3 读取指定位置元素 2.4 查找指定元素 2.5 在指定位置插入新元素 2.6 删除指定位置元素 2.7 其它一些有用的操作 3. 顺序表应用 3.1 顺序表应用示例 3.2 利用顺序表基本操作实现复杂操作 0. 学习目标 线性表在计算机中的表示可以采用多种方法,采用不同存储方法的线性表也有着不同的名称和特

  • 详解通用webpack多页面自动导入方案

    目录 前言 思考 安装glob 创建工具类 getEntry getHtmlWebpackPlugin 二次封装 应用 前言 在之前,我写了一个webpack的模板.在平时我写栗子或者是写几个页面的时候会用到它.当这个模板需要多个页面时需要手动到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有点麻烦. 思考 我们项目中的页面都是存放在src/pages/*.html中的,我们可以搜索这里文件夹下的html文件我们可以利用node中的glob包中的.s

  • 详解Oracle在out参数中访问光标

    详解Oracle在out参数中访问光标 一 概念 申明包结构 包头:负责申明 包体:负责实现 二 需求 查询某个部门中所有员工的所有信息 三 包头 CREATE OR REPLACE PACKAGE MYPACKAGE AS type empcursor isref cursor; procedure queryEmplist(dno in number,emplist out empcursor); END MYPACKAGE; 四 包体 包体需要实现包头中声明的所有方法 CREATE OR

随机推荐