js讀取Excel表格,js完成點擊復制數據的代碼教程

廢話

項目需求:根據日期讀取某個excel的某塊區域;,生成數組,點擊可復制該數組,另作他用;

根據第幾周讀取不同的sheet(Excel左下角) 周一讀取周一的片名,周二讀取周二的片名,依次。。

Excel 內容區域如下圖:

這裡寫圖片描述

最終效果實例:

醜瞭點:

這裡寫圖片描述

看整體代碼:

必要的備註均有

<html>
<head>
    <meta charset="UTF-8">
    <title>ReadExcel</title>
</head>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<body>
<p class="container">
    <select id="selectWeek" name="selectWeek" onchange="getWeekDay()">
        <option value="0">第一周</option>
        <option value="1">第二周</option>
        <option value="2">第三周</option>
        <option value="3">第四周</option>
        <option value="4">第五周</option>
    </select>
    <br>
    <select id="selectDay" name="selectDay" onchange="getWeekDay()">
        <option value="A">周一</option>
        <option value="C">周二</option>
        <option value="E">周三</option>
        <option value="G">周四</option>
        <option value="I">周五</option>
        <option value="K">周六</option>
        <option value="M">周日</option>
    </select>
    <br>
    <input type="file" onchange="importf(this)" id="file"/>
    <br>
    <textarea cols="20" rows="10" id="textArea"></textarea>
    <br>
    <input type="button" onClick="copy()" value="點擊復制代碼"/>
</p>
<script type="text/javascript" src="./shim.min.js"></script>
<script type="text/javascript" src="./xlsx.full.min.js"></script>
<script>
    var wb;//讀取完成的數據
    var rABS = false; //是否將文件讀取為二進制字符串
    var values = [];//最終要的數組數據
    var week = 0;//初始默認定義選取第一周的數據
    var day = 'A';//初始默認定義選取第一天的數據,第一天就是A列。看表;
    var weekDay = [];//初始第一周第一天的為空的

    for (var m = 3; m < 100; m++) {//從每一列的第三行開始;看表
        weekDay.push(`A${m}`)//初始進入的時候第一周第一天有100條數據,查詢A列,從地三行到地100行的數據;放入數組
    }

    function getWeekDay() {//該方法為獲取哪一周哪一天的列表,某天的數據為 一列默認為從第三行到地100行;
        var selectWeek = document.getElementById('selectWeek');//基本操作啦
        var selectDay = document.getElementById('selectDay');//基操啦!
        week = selectWeek.value;//獲取人工選擇的是哪一周
        day = selectDay.value;//獲取人工選擇的是哪一天
        weekDay = [];//如果重復操作該頁面,為瞭防止數據增加。所以要初始化該數組;
        for (var j = 3; j < 100; j++) {
            weekDay.push(`${day}${j}`)//最終獲取該列表對應的格數及位置;以備後用;
        }
    }

    function importf(obj) {//導入文件
        if (!obj.files || obj.files.length <= 0) {//如果onchange事件發生但是未傳入文件,那麼啥都不幹。
            return;
        }
        var f = obj.files[0];//f為讀取到的文件
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(data)), {//手動轉化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            //wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字
            //wb.Sheets[Sheet名]獲取第一個Sheet的數據
            // var jsonText = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            values = [];
            for (var i = 0; i < weekDay.length; i++) {//遍歷查找weekDay數組中的數據,組成新數據數組得到最終值values
                if (wb.Sheets[wb.SheetNames[week]][weekDay[i]]) {
                    var cellValue = wb.Sheets[wb.SheetNames[week]][weekDay[i]].v;//
                    values.push(`"${cellValue}"`)
                } else {
                    continue
                }
            }
            // console.log(values);
            var textArea = document.getElementById('textArea');
            textArea.value = `[${values}]`
            obj.value = ''
        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }

    function fixdata(data) { //文件流轉BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

    function copy() {//這個方法完成復制數據功能
        var textArea = document.getElementById('textArea');
        textArea.select(); // 選擇對象
        document.execCommand("Copy"); // 執行瀏覽器復制命令
        alert("復制成功");
    }
</script>
</body>
</html>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *