js-xlsx工具类库 xlsxUtils 使用示例

最新推荐文章于 2024-04-12 09:32:00 发布
最新推荐文章于 2024-04-12 09:32:00 发布
阅读量6.4k 收藏 1
点赞数
文章标签： json
原文链接：https://yq.aliyun.com/articles/658200
版权

xlsxUtils

代码:xlsx.utils.min.js
代码:xlsx.utils.js

函数说明:

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 数据 
     * @param {Number} n
     * @param {Number} r
     * @param {Array} keyMap
     */
    format2Sheet(json, n, r, keyMap) {
        //......
    },
    /**
     * @desc 格式化数据为Sheet格式
     * @param {Array} sheetData 
     * @param {String} title 
     * @param {Object} wb 
     * @param {Object} ref
     */
    format2WB(sheetData, title = "mySheet", wb,ref) {
        //......
    },
    /**
     * @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>
weixin_34212762
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
excelUtils公共导出支持xls与xlsx
01-19
jxl2.6以上，excelUtils公共导出支持xls与xlsx两种格式，excelUtils中最后一个方法是excel文件导入例子
xlsx导出excel示例（原示例代码）
01-11
xlsx导出excel示例（原示例代码）
vue EXCEL XLSX.utils.sheet_to_json()解析Excel文件
ifmushroom的博客
10-10 2万+
查看源码中的XLSX.utils.sheet_to_json()方法，发现有三个同名的方法,有两个参数，第一个worksheet是要解析的excel文件的工作簿对象，第二参数opts?: Sheet2JSONOpts，？表示是这个参数可有可无，不传就没有。源码如下图： export interface XLSX$Utils { /* --- Import Functions --- */ /** Converts an array of arrays of JS data to a wor
探索Js-Xlsx：优雅地处理Excel数据的JavaScript库
最新发布
gitblog_00008的博客
04-12 360
探索Js-Xlsx：优雅地处理Excel数据的JavaScript库 项目地址:https://gitcode.com/protobi/js-xlsx Js-Xlsx 是一个强大的JavaScript库，专门用于读取、写入和操作Excel文件（.xlsx和.xls格式）。它采用纯JavaScript编写，无需任何服务器端依赖，因此无论是在浏览器环境中还是Node.js后台服务中，都能方便地使用。 ...
XlsxExcel导出工具XlsxExcelUtils
一个写了10年bug的程序员日常笔记。
04-29 1442
import java.io.File; import java.io.FileOutputStream; import java.math.BigDecimal; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.UUID;import org.apache.commons
前端下载表格
weixin_44230807的博客
11-09 399
## **引用 xlsx.core.min.js** // 表格下载方法 function exportExcel(data) { console.log(data) if (data.length == 0) { return } let newdataarr = [] let titarr = ['排名', '职.
一个普通的excel表格示例文件
09-08
该excle是一个普通的表格文件，后缀名是xlsx。用于博客中讲解的读取excel表格示例。该文件含有多个sheet表。
可以修改样式的js-xlsx
05-21
可以导出并修改excel样式的前端excel库，已同步社区最新版。...由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，遗憾的是无法修改导出表格的样式。
js-xlsx二次简单封装工具
11-24
基于SheetJS的js-xlsx实现导出功能，可以进行样式调整。根据插件设计了简单的工具类封装使用，应该能够满足普通的导出。大数据量的导出，提倡交给后端处理。
js-xlsx-demo
08-05
js-xlsx的演示案例，非常的简单。容易操作，直接上手，不明白的可以 加我，打疑。哈哈希望大家多多评论。谢谢了。
nodejs使用node-xlsx生成excel的方法示例
01-01
## 使用nodejs中node-xlsx库进行excel的生成操作 ## 近日，应领导要求，从网上抓了一大批数据存入了数据库，可是妈妈批 ，市场妹子要的是excel表格啊，毕竟妹子的话还是要听的（关键人家语气蛮好的），就从网上查...
ExcelUtils 工具类
01-31
用于数据库数据导出到Excel表的java工具类，适合多种格式
JS使用xlsx导出excel文件
m0_47796330的博客
07-29 1152
// 安装插件 // npm install xlsx --save import React, { useEffect, useState, Fragment } from ‘react’ import XLSX from ‘xlsx’; export default function ExportExcle() { const workbook2blob = (workbook) => { // 生成excel的配置项 var wopts = { bookType: ‘xlsx’, // 要生成的
使用XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串
热门推荐
weixin_43817709的博客
12-29 2万+
前言 今天用到XLSX来解析excel文件，调用XLSX.utils.sheet_to_json(worksheet)，发现如果单元格为空的话，解析出来的结果，就会缺少相应的key（如图所示）。但是我想要单元格为空的话，值就默认给空字符串，怎么办呢？只能去看看源码了，看有没有给默认值的方法。 源码探究 找源码里的sheet_to_json（）方法，发现有三个同名的方法,有两个参数，第一个work...
操作excel的js工具库 - XLSX的使用方法
m0_62762847的博客
04-30 1万+
xlsx使用文档
XLSX.js 使用笔录
菜鸟学编程
05-20 1354
// 步骤1：建工作簿 var wb = XLSX.utils.book_new(); /** * 步骤2：建工作表 * 创建工作表 * aoa_to_sheet 二维数组 * json_to_sheet 对象数组 * table_to_sheet tableDOM（表模型） */ let ws= XLSX.utils.json_to_sheet(json); // 步骤3：把工作表添加到工作簿中 XLSX.utils....
xlsx.utils.sheet_to_json的{ header: 1 }起的作用，header属性的研究
qq_44267691的博客
01-10 5682
XLSX.utils.sheet_to_json的{ header: 1 }的作用，以及header属性的研究
解析Excel文件 Utils
吾生也有涯，而知也无涯
04-12 839
public class ReadExcel { // 总行数 private int totalRows = 0; // 总条数 private int totalCells = 0; // 错误信息接收器 private String errorMsg; // 构造方法 public ReadExcel() { } ...
JS-XLSX 库的表头样式设置示例
06-13
以下是一个示例代码，演示如何设置表头样式： ```javascript var workbook = XLSX.utils.book_new(); var worksheet = XLSX.utils.json_to_sheet([ { name: "John Doe", age: 35 }, { name: "Jane Doe", age: 28 }, ]); // 定义表头样式 const headerStyle = { font: { sz: 14, bold: true, color: { rgb: "FFFFFF" } }, fill: { patternType: "solid", fgColor: { rgb: "0070C0" } }, border: { top: { style: "thin", color: { auto: 1 } }, right: { style: "thin", color: { auto: 1 } }, bottom: { style: "thin", color: { auto: 1 } }, left: { style: "thin", color: { auto: 1 } }, }, alignment: { horizontal: "center", vertical: "center", wrapText: true }, }; // 设置表头样式 Object.keys(worksheet).forEach(function (cell) { if (cell[0] === "A") { worksheet[cell].s = headerStyle; } }); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, "example.xlsx"); ``` 在上面的示例中，表头样式被定义为常量`headerStyle`，包括了字体、填充、边框、对齐等属性。通过`Object.keys(worksheet).forEach`方法遍历所有单元格，找到第一列（A列）的单元格，设置其样式为表头样式。最终生成的Excel文件中，第一列的单元格将具有表头样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值