专栏首页程序员成长指北Vue+Element前端导入导出Excel(实践)

Vue+Element前端导入导出Excel(实践)

(给程序员成长指北加星标,提升前端技能.)

作者:xrkffgg https://segmentfault.com/a/1190000018993619

1、 前言

1.1 业务场景

由前台导入Excel表格,获取批量数据。

根据一个数组导出Excel表格。

2、 实现原理

2.1 引入工具库

file-saver、xlsx、script-loader

npm install -S file-saver xlsx
npm install -D script-loader

2.2 导入Excel

2.2.1 Element 上传控件

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :file-list="fileListUpload"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
</el-upload>

limitUpload = 1限制只能上传1个文件

accept为默认打开的可上传的文件格式

handleChange(file, fileList){
    this.fileTemp = file.raw
},

handleRemove(file,fileList){
    this.fileTemp = null
},

fileTemp这里定义了一下变量,指向最新上传的附件,起始定义为null。

这里发现控件file.raw是我们要用的File类型。

2.2.2 导入判断

if(this.fileTemp){
    if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){
        this.importfxx(this.fileTemp)
    } else {
        this.$message({
            type:'warning',
            message:'附件格式错误,请删除后重新上传!'
        })
    }
} else {
    this.$message({
        type:'warning',
        message:'请上传附件!'
    })
}

2.2.3 导入函数

importfxx(obj) {
    let _this = this;
    // 通过DOM取文件数据
    this.file = obj
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for(var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        var 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就是你想要的东西
            this.da = [...outdata]
            let arr = []
            this.da.map(v => {
                let obj = {}
                obj.code = v['设备ID']
                obj.type = v['设备型号']
                arr.push(obj)
            })
            return arr
        }
        reader.readAsArrayBuffer(f);
    }

    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
},

arr就是我们要的结果,是一个数组。每一个值是个对象,包含了code type两个属性。

excel中格式为横向 设备ID 和 设备型号。

2.3 导出Excel

2.3.1 引入JS文件

可参考下载地址- github:https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel

将其中的2个JS文件放入到自己的工程中。

2.3.2 修改JS文件中地址

打开Export2Excel.js,会出现如上图所示。由于本人将Blob.jsExport2Excel.js放到了同一级,这里引入是这样的。

这几个文件不支持import引入,所以需要script-loader来将他们挂载到全局环境下。

2.3.3 导出函数

getExcel(res) {
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../introduce/Export2Excel.js')
        const tHeader = ['姓名', '年龄']
        const filterVal = ['name', 'age']
        const list = res
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '导出列表名称')
    })
},

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
},

这里的引用请根据自己的层级关系和文件夹命名require('../../introduce/Export2Excel.js')

res为传入的数组,格式如:res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]

tHeader为导出Excel表头名称,导出列表名称即为导出Excel名称。

下载的Excel位置根据浏览器设置的下载位置而定。

3、 后记

感谢支持。若不足之处,欢迎大家指出,共勉。

如果觉得不错,记得 点赞 ,谢谢大家 ?

❤️ 看完三件事
大家好,我是 koala,如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个【在看】,或者分享转发,让更多的人也能看到这篇内容关注公众号【程序员成长指北】,不定期分享原创&精品技术文章。添加微信【 coder_qi 】。加入程序员成长指北公众号交流群。分享前端好文,点亮 在看 

本文分享自微信公众号 - 程序员成长指北(coder_growth),作者:xrkffgg

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从敲下一行JS代码到这行代码被执行,中间发生了什么?

    我们每天都在写JS,你是否想过,计算机是怎么识别你的这一行代码,并且执行相应指令?本篇文章为你讲述从敲下一行JS代码到这行代码可以被执行算出正确的结果,都经历了...

    coder_koala
  • 如何优雅的实现一个九宫格抽奖

    九宫格抽奖是在移动端常见开发功能点之一,那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。

    coder_koala
  • 「中高级前端」窥探数据结构的世界- ES6版

    数据结构是在计算机中组织和存储数据的一种特殊方式,使得数据可以高效地被访问和修改。更确切地说,数据结构是数据值的集合,表示数据之间的关系,也包括了作用在数据上的...

    coder_koala
  • 学习笔记-小甲鱼Python3学习第十九

    局部变量(Local Variable):在整个py文件中声明,全局范围内都可以调用

    py3study
  • 使用 Asp.net Future May 2007 开发Silverlight应用

    Microsoft ASP.NET Futures May 2007,这是一个Future的好东西,包括了:ASP.NET AJAX Futures,Silve...

    张善友
  • 开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

    最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

    知晓君
  • 深入理解JavaScript系列(37):设计模式之享元模式

    享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类)。

    用户4962466
  • 【Golang语言社区--H5编程】smoke.js

    大家好,我是社区主编彬哥,今天给大家带来的H5游戏编程中,烟雾特效的js库; 源码如下 var smokemachine = function (c...

    李海彬
  • Redis系列(二)-Hredis客户端设计及开源

    蘑菇先生
  • javascript基础知识点1.0

    知识点综述: ---- 在复习JavaScript语法,主要看的是w3cschool的教程。 用法: 1.0必须位于<script></s...

    东风冷雪

扫码关注云+社区

领取腾讯云代金券