js-xlsx的工具類別庫xlsxUtils的使用詳解-js教程-PHP中文網

首頁

web前端

js教程

js-xlsx的工具類別庫xlsxUtils的使用詳解

php中世界最好的语言

Mar 12, 2018 pm 03:39 PM

javascript

這次帶給大家js-xlsx的工具類別庫xlsxUtils的使用詳解，使用js-xlsx的工具類別庫xlsxUtils的注意事項有哪些，下面就是實戰案例，一起來看一下。

函數說明:

var xlsxUtils = {
    Binary: {
        fixdata(data) { //文件流转BinaryString
            //......
        },
        s2ab(s) { //字符串转字符流
            //......
        }
    },
    _wb: null,//缓存导入时的Workbook 
    _rABS: false,//设置读取方式
    /**
     * @desc  导入根据文件
     * @param {File} f 文件
     * @param {Function} c 回调
     * @return {Object} 回调值
     */
    import(f, c) {        //......
    },    /**
     * @desc  根据表Sheet名获取数据
     * @param {String} name 
     * @return {Object} 
     */
    getSheetByName(name) {//
        //......
    },    /**
     * @desc  根据表Sheet索引获取数据
     * @param {Number} index 
     * @return {Object}
     */
    getSheetByIndex(index = 0) {        //......
    },    /**
     * @desc 导出
     * @param {Array} data 数据{title1:dataList,title2:dataList....}  
     * @param {String} type 
     * @return {Blob}
     */
    export(data, type) {        //......
    },    /**
     * 从数据数组或对象中根据key生成相同key值的对象
     * @param {Object|Array} data 
     * @return {Object}
     */
    readDataHead(data) {        //......
    },    /**
     * @desc 格式化数据为Sheet格式
     * @param {Array} json 数据
     */
    format2Sheet(json, n) {        //......
    },    /**
     * @desc 格式化数据为Sheet格式
     * @param {Array} sheetData 
     * @param {String} title 
     * @param {Object} wb 
     */
    format2WB(sheetData, title = "mySheet", wb) {        //......
    },    /**
     * @desc 将xlsx Workbook 转为blob
     * @param {Array} wb 
     * @param {String} type 类型
     */
    format2Blob(wb, type) {        //......
    },    /**
     * @desc 匹配单元格对应的标识
     * @param {Number} n 
     */
    getCharCol(n) {       //......
    },
};

登入後複製

範例:

匯入範例(線上範例):

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script> 
    <script src="./xlsx.utils.js"></script></head><body>
    <input type="file" id="demo" />
    <div id="loadInfo"></div>
    <div>
        <div>
            <label>SheetNames</label>:            <span id="SheetNames"></span>
        </div>
        <div>
            <label id="demoName"></label>(示例):            <span id="demoData"></span>
        </div>
    </div>
    <script>
        var demo = document.getElementById("demo");
        demo.onchange = function () {            let f = this.files[0];            let loadInfo = document.getElementById("loadInfo");            let demoName = document.getElementById("demoName");            let demoData = document.getElementById("demoData");
            loadInfo.innerHTML = "正在读取请骚等";
            demoName.innerHTML = "";
            demoData.innerHTML = "";
            xlsxUtils.import(f, (w) => {                document.getElementById("SheetNames").innerHTML = JSON.stringify(w.SheetNames);
                demoName.innerHTML = w.SheetNames[0];
                demoData.innerHTML = JSON.stringify(xlsxUtils.getSheetByIndex(0));
                loadInfo.innerHTML = "读取完成";
            });
        };    </script></body></html>

登入後複製

匯出範例(線上範例)

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script> 
    <script src="xlsx.utils.min.js"></script>
    <script src="saveAs.min.js"> </script></head><body>
    <script>
        var data = [{ 主页: "111", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 主页: "433", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 名称: "22", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 名称: "43", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 店家: "43", 价格: "6800", 数量: "6800", 昵称: "广告主网", }];    </script>
    <button id="down">导出</button>
    <script>
        var down = document.getElementById("down");
        down.onclick = function () {
            data.unshift(xlsxUtils.readDataHead(data));            var blob = xlsxUtils.export({ "Sheet1": data, "Sheet2": [{ "a": "A", "b": "B" }, { "a": 1, "b": "2" }, { "a": 3, "b": 4 }, { "a": 5, "b": 6 }] });
            saveAs(URL.createObjectURL(blob), "aa.xlsx");
        };    </script></body></html>

登入後複製

自訂起始列導出範例(線上範例)

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script> 
    <script src="xlsx.utils.min.js"></script>
    <script src="saveAs.min.js"> </script></head><body>
    <script>
        var data = [{ 主页: "111", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 主页: "433", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 名称: "22", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 名称: "43", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 店家: "43", 价格: "6800", 数量: "6800", 昵称: "广告主网", }];    </script>
    <button id="down">导出</button>
    <script>
        var down = document.getElementById("down");
        down.onclick = function () {
            data.unshift(xlsxUtils.readDataHead(data)); 
            var tmpdata = xlsxUtils.format2Sheet(data, 2);            var tmpWB = xlsxUtils.format2WB(tmpdata, "Sheet1");
            tmpdata = xlsxUtils.format2Sheet([{ "a": "A", "b": "B" }, { "a": 1, "b": "2" }, { "a": 3, "b": 4 }, { "a": 5, "b": 6 }], 4);
            tmpWB = xlsxUtils.format2WB(tmpdata, "Sheet2", tmpWB);            var blob = xlsxUtils.format2Blob(tmpWB);
            saveAs(URL.createObjectURL(blob), "aa.xlsx");
        };    </script></body></html>

登入後複製

多資料合併匯出到單一表示例(線上範例)

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script> 
    <script src="xlsx.utils.min.js"></script>
    <script src="saveAs.min.js"> </script></head><body>
    <script>
        var data = [{ 主页: "111", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 主页: "433", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 名称: "22", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 名称: "43", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 店家: "43", 价格: "6800", 数量: "6800", 昵称: "广告主网", }];    </script>
    <button id="down">导出</button>
    <script>
        var down = document.getElementById("down");
        down.onclick = function () {            var d1 = xlsxUtils.format2Sheet([{ "a": "A", "b": "B" }, { "a": 1, "b": "2" }, { "a": 3, "b": 4 }, { "a": 5, "b": 6 }]);            var h=xlsxUtils.readDataHead(data);//读取data的列头数据
            data.unshift(h);//将列头追加到最data的前
            var em={};//用于换行
            Object.keys(h).forEach((v)=>{
                em[v]="";
            });            for(var i=0;i<5;i++){//换5行
                data.unshift(em);
            }            var d2 = xlsxUtils.format2Sheet(data, 3);//3代表从D列开始
            d1=Object.assign(d1,d2); 
            var tmpWB = xlsxUtils.format2WB(d1, "Sheet1"); 
            var blob = xlsxUtils.format2Blob(tmpWB);
            saveAs(URL.createObjectURL(blob), "aa.xlsx");
        };    </script></body></html>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7486

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

See all articles

js-xlsx的工具類別庫xlsxUtils的使用詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題