【可视化】Excel 文件的转换（前端）

最新推荐文章于 2024-04-20 14:42:51 发布

Lovely Ruby

最新推荐文章于 2024-04-20 14:42:51 发布

阅读量520

点赞数

文章标签： excel 转换 json

本文链接：https://blog.csdn.net/u010263423/article/details/102593762

版权

1. 引入框架

首先引入了这个框架

链接：https://pan.baidu.com/s/1ut1jd06Opv1FXESMOQZqBw
提取码：qnh0

2. 前端搭建

Body 部分

在 body 中写个 file 类型的 input 框，类似这个：<input type="file" id="exl" accept="">，作用是 为了上传 excel 文件

Script 部分

接着要写脚本，来把 excel 文件导入到我们的程序中，并且转换成我们可以处理的格式

其中说几个重点

var data = new Uint8Array(e.target.result);
var reader = new FileReader();
reader.readAsArrayBuffer(f)
var workbook = XLSX.read(data,{type:"array"});

程序如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将表格文件转成json</title>
    <!--首先要引入这个xlsx.full.min.js-->
    <script src="dist/xlsx.full.min.js"></script>
</head>
<body>
    <input type="file" id="exl" accept="">
</body>
<script>

    /*首先获得到exl*/
    var exl = document.querySelector("#exl");

    /*承接文件 e为事件因子*/
    function handlerFile(e) {
        /*创建变量用来承接excel
        files是个文件数组，你上传的虽是单文件但是他还是帮你存到了数组中
        如果是单个文件的话直接取files[0]取首元素就行*/
        var files = e.target.files,f = files[0];

        /*FileReader读取到文件中的数据。*/
        var reader = new FileReader();
        reader.onload = function (e) {
            /*建立文件流*/
            var data = new Uint8Array(e.target.result);

            /*插件中的方法，通过插件来解析data数据，并存储在workbook中*/
            /*这里的插件相当于一个翻译机器
            * 把data这个文件流翻译成我们能够解析的数据*/
            var workbook = XLSX.read(data,{type:"array"});

            /*执行函数*/
            readWorkbook(workbook)
        };
        reader.readAsArrayBuffer(f)
    }

    /*转码*/
    function readWorkbook(workbook) {
        /*找到表格中，表的名字，是个数组*/
        var sheetNames = workbook.SheetNames;

        /*通过表的名字找表，这里是表sheet1*/
        var worksheet = workbook.Sheets[sheetNames[0]];

        /*通过插件将表格数据转换成json并存储在obj中*/
        var obj = XLSX.utils.sheet_to_json(worksheet);

        /*给obj排序*/
        sortObj(obj)
    }

    /*给数据排序*/
    function sortObj(obj) {
        obj.sort(function (a,b) {
            return b.订单数量 - a.订单数量;
        });
        console.log(obj)
    }

    /*监听上传的文件是否改变*/
    exl.addEventListener("change",handlerFile,false);
</script>
</html>