纯前端 excel 转成 json 文件下载到本地

纯前端上传 excel 并读取内容生成 json 文件下载到本地

很多时候,产品那边给的资料都是表格形式的,但是我们一般都是用 json 格式。所以才有了这个文档。

话不多说,上代码~~

先去下载两个文件:
 	1. https://github.com/eligrey/FileSaver.js
 	2. http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js
 	
望文生义,第一个是文件保存用到的,第二是解析表格用到的
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="file" id="input"/>
</body>
<script src="xlsx.full.min.js"></script>
<script src="FileSaver.js"></script>
<script>
   
    function importfile(obj) {//导入文件
        if (!obj.files) {
            alert('文件错误,请重新选择');
            return
        }
        var reader = new FileReader(),
            file = obj.files[0];
        
        reader.onload = function (e) {
            var data = e.target.result;
            
            var wb = XLSX.read(data, {
                    type: 'binary'
                });
            
            data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) //转成 json 数据
            console.log(data)
            downloadJson(data)
        };
        
        reader.readAsBinaryString(file) //以二进制方式读取
        
    }
 
    function downloadJson(data,filename) {
        var blob = new Blob([JSON.stringify(data)], { type: "text/plain;charset=utf-8" });
        saveAs(blob, filename || 'data.json');
    }
    input.onchange=function(){
        importfile(input)
    }
</script>
</html>

·

测试一下

建个 excel ,叫做 3.xlsx。内容如图:

在这里插入图片描述
导出的 json 文件
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/zhai_865327/article/details/102549482