h5页面excel(本地)转json

h5页面excel(本地)转json
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>配置工具</title>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
    <script type="text/javascript" src="../static/js/mui.min.js"></script>
    <script type="text/javascript" src="../static/util/excel/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/page-excel.css"/>
</head>

<body>
<div>
    <section>
        <input class="up_input_excel" type="file" multiple="multiple"
               id="up_excel_id" accept=".json,.yml,.xlsx"
               capture="camera" enctype="multipart/form-data"/>
        <label class="add_accessory_btn up_img" for="up_excel_id"></label>
    </section>
    <div id="excel_file_id"></div>
    <div id="excel_file_result"></div>
</div>


<script>
    $(function () {
    
    
        //监听
        listener()
        //本地Excel转化为Json
        getLocalExcelJson()
    });
    /**
     * 本地Excel转化为Json
     */
     function getLocalExcelJson() {
    
    
         //本地xls文件路径
        let url = '../assets/excel/china_geo.xlsx';
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "blob"
        xhr.onload = function() {
    
    
            if (this.status === 200) {
    
    
                const blob = this.response
                const fileReader = new FileReader()
                fileReader.readAsBinaryString(blob)
                fileReader.onload = function (file) {
    
    
                    console.log("==file==",file)
                    let dataBinary = file.target.result
                    // xlsx.js读取
                    let workBook = XLSX.read(dataBinary, {
    
    type: 'binary', cellDates: true})
                    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
                    const data = XLSX.utils.sheet_to_json(workSheet)
                    console.log(data)
                    var excelJson=JSON.stringify(data)
                    //$('#excel_file_id').html(excelFile.name)
                    $('#excel_file_result').html('转换结果:' + excelJson)
                }
            }
        }
        xhr.send();

    }
     /**
     * 监听
     */
    function listener() {
    
    
        //上传Excel文件
        $('#up_excel_id').change(function () {
    
    

        })
    }
</script>
</body>
</html>

资源下载
h5页面excel转json

猜你喜欢

转载自blog.csdn.net/qq_36158551/article/details/130898863
今日推荐