资讯专栏INFORMATION COLUMN

前端实现Excel导入和导出功能

Amio / 2721人阅读

摘要:介绍最近项目中让实现一个导入导出的功能,查找了一些插件后发现这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。

介绍

最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。

SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 14k 个 star。
插件地址:https://github.com/SheetJS/js...

使用

1.安装依赖

进入项目文件夹,安装 xlsx

yarn add xlsx

2.在项目中引入

import * as XLSX from "xlsx"
导出Excel功能实现

1.定义导出时需要使用的方法

export default function download(json,fileName){
    const type = "xlsx"//定义导出文件的格式
    var tmpDown;//导出的内容
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //获取keys
    for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
    }
    var tmpdata = [];//用来保存转换好的json 
    
    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
        v: v[k],
        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
        v: v.v
    });
    var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
    var tmpWB = {
        SheetNames: ["mySheet"], //保存的表标题
        Sheets: {
            "mySheet": Object.assign({},
                tmpdata, //内容
                {
                    "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] //设置填充区域
                })
        }
    };
    tmpDown = new Blob([s2ab(XLSX.write(tmpWB, 
        {bookType: (type == undefined ? "xlsx":type),bookSST: false, type: "binary"}//这里的数据是用来定义导出的格式类型
        ))], {
        type: ""
    }); //创建二进制对象写入转换好的字节流
    saveAs(tmpDown,fileName);
}

function saveAs(obj, fileName){//导出功能实现
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下载";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载
    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);
}

function s2ab(s){ //字符串转字符流
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

function getCharCol(n){
    let temCol = "",
    s = "",
    m = 0
    while (n > 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
}

2.项目中使用导出方法

//导出excel
//导出excel
downloadExl = () => {
    const { results } = this.props //需要导出的json数据
    let datas = _.clone(results)//这里为了不影响项目的数据的使用 采用了lodash中的深克隆方法
    let json = datas.map(item=> { //将json数据的键名更换成导出时需要的键名
        return {
            "人员ID" :item.id,
            "姓名" : item.name,
            "证件类型": this.findIdType(item.idType),//将类型代号转为汉字
            "证件号码": item.credentialsId,
            "固定电话": item.tel,
            "移动电话": item.mobile
        }
    })
    download(json,"人员信息.xlsx")//导出的文件名
}

3.绑定事件

这样就能轻松实现Excel的导出功能了

导入Excel功能实现

1.定义导入时需要使用的方法

//导入excel
onImportExcel = file => {
    // 获取上传的文件对象
    const { files } = file.target;
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            const workbook = XLSX.read(result, { type: "binary" });
            // 存储获取到的数据
            let data = [];
            // 遍历每张工作表进行读取(这里默认只读取第一张表)
            for (const sheet in workbook.Sheets) {
            // esline-disable-next-line
            if (workbook.Sheets.hasOwnProperty(sheet)) {
                // 利用 sheet_to_json 方法将 excel 转成 json 数据
                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                // break; // 如果只取第一张表,就取消注释这行
            }
        }
        // 最终获取到并且格式化后的 json 数据
        const uploadData = data.map(item=> {
            return {
                id : Number(item["人员ID"]),
                name : item["姓名"],
                idType: this.findIdType(item["证件类型"],"string"),
                credentialsId: item["证件号码"],
                tel: item["固定电话"],
                mobile: item["移动电话"]
            }
        })
        console.log(uploadData)//这里得到了后端需要的json数据,调用接口传给后端就行了
        message.success("上传成功!") //这里用了antd中的message组件
        } catch (e) {
            // 这里可以抛出文件类型错误不正确的相关提示
            message.error("文件类型不正确!");
        }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
}

2.绑定事件

3.修改样式

.upload_wrap {
  display: inline-block;
  position: relative;
  width: 94px;
  padding: 3px 5px;
  overflow: hidden;
}

.file_uploader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  opacity: 0;
  background-color: transparent;
}

.upload_text {
  display: inline-block;
  margin-left: 5px;
}

.upload_tip {
  display: inline-block;
  margin-left: 10px;
  color: #999;
}

4.针对文件上传和读取结果分别做了对应的提示(这里使用 ant design 中的 message 组件)

5.得到的json数据

导入导出功能就这样实现了,是不是很简单。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101350.html

相关文章

  • 使用 SpreadJS 实现 JavaScript 中导入导出Excel文件

    摘要:而作为一款深受用户喜爱的电子表格工具,借助其直观的界面出色的计算性能和图表工具,已经成为数据统计领域不可或缺的软件之一。使用实现的导入和导出通过纯,您完全可以实现导入和导出文件功能,并为最终用户提供与这些文件进行交互的界面。 JavaScript是一个涵盖多种框架、直译式、可以轻松自定义客户端的脚本语言,在 Web 应用程序中,更加易于编码和维护。而Excel 作为一款深受用户喜爱的电...

    Jioby 评论0 收藏0
  • 前端实现excel表格导入导出

    摘要:使用时,前端可以将后端返回的数据拼接成自己需要导出的格式,下载到电脑中,完全不依赖后端。 前言 github: https://github.com/stardew516... 以往做excel表格下载功能的时候,都是后端生成好表格后,存储在某个地方,然后给前端一个链接,前端使用a标签加download下载,或者使用node。其实纯前端也是可以做表格下载的,有一个很好用的javascr...

    CoyPan 评论0 收藏0
  • Vue+Element前端导入导出Excel

    摘要:前言业务场景由前台导入表格,获取批量数据。根据一个数组导出表格。每一个值是个对象,包含了两个属性。由于本人将和放到了同一级,这里引入是这样的。这几个文件不支持引入,所以需要来将他们挂载到全局环境下。若不足之处,欢迎大家指出,共勉。 1 前言 1.1 业务场景 由前台导入Excel表格,获取批量数据。 根据一个数组导出Excel表格。 2 实现原理 2.1 引入工具库 file-save...

    NikoManiac 评论0 收藏0
  • 前端开发案例:用 SpreadJS 搭建信息系统软件开发平台

    摘要:葡萄城的是一个基于技术的纯控件,控件性能流畅,有类似的在线表格编辑器,适合非专业程序员设计报表模板,很符合平台部分无编码开发的理念。葡萄城控件产品对于项目的价值控件主要用于本项目中的报表设计,展示,打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 华闽通达 - R 平台应用所使用产品:SpreadJS ...

    Heier 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<