JS 读取excel文件内容 和 将json数据导出excel文件

一、实现将json数据导出为excel文件

1、通过原生js实现

核心方法:

function JSONToExcelConvertor(JSONData, FileName, title, filter) {
      if (!JSONData)
        return;
      //转化json为object
      var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

      var excel = "<table>";

      //设置表头  
      var row = "<tr>";

      if (title) {
        //使用标题项
        for (var i in title) {
          row += "<th align='center'>" + title[i] + '</th>';
        }

      }
      else {
        //不使用标题项
        for (var i in arrData[0]) {
          row += "<th align='center'>" + i + '</th>';
        }
      }

      excel += row + "</tr>";

      //设置数据  
      for (var i = 0; i < arrData.length; i++) {
        var row = "<tr>";

        for (var index in arrData[i]) {
          //判断是否有过滤行
          if (filter) {
            if (filter.indexOf(index) == -1) {
              var value = arrData[i][index] == null ? "" : arrData[i][index];
              row += '<td>' + value + '</td>';
            }
          }
          else {
            var value = arrData[i][index] == null ? "" : arrData[i][index];
            row += "<td align='center'>" + value + "</td>";
          }
        }

        excel += row + "</tr>";
      }

      excel += "</table>";

      var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
      excelFile += '; charset=UTF-8">';
      excelFile += "<head>";
      excelFile += "<!--[if gte mso 9]>"
      excelFile += "<xml>";
      excelFile += "<x:ExcelWorkbook>";
      excelFile += "<x:ExcelWorksheets>";
      excelFile += "<x:ExcelWorksheet>";
      excelFile += "<x:Name>";
      excelFile += "{worksheet}";
      excelFile += "</x:Name>";
      excelFile += "<x:WorksheetOptions>";
      excelFile += "<x:DisplayGridlines/>";
      excelFile += "</x:WorksheetOptions>";
      excelFile += "</x:ExcelWorksheet>";
      excelFile += "</x:ExcelWorksheets>";
      excelFile += "</x:ExcelWorkbook>";
      excelFile += "</xml>";
      excelFile += "<![endif]-->";
      excelFile += "</head>";
      excelFile += "<body>";
      excelFile += excel;
      excelFile += "</body>";
      excelFile += "</html>";

      var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

      var link = document.createElement("a");
      link.href = uri;

      link.style = "visibility:hidden";
      link.download = FileName + ".xls";

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

JSONData:json数据
FileName:导出的文件名
title: 列的表头标题
filter: 要过滤的数据列

方法调用:

let excelData = [
 { "c1": "990019", "c2": "张三1", "c3": "女", },
  { "c1": "140007", "c2": "张三2", "c3": "女", },
]
JSONToExcelConvertor(excelData, "test", ['ID(编号)', 'NAME(名称)'], ['c3']);

2、通过xlsx.js实现

安装

方式一:命令行下载

npm install xlsx

方式二:github手动下载
https://github.com/SheetJS/sheetjs/tree/github/dist

<script type="text/javascript" src='./xlsx.full.min.js'></script>
使用

实现核心方法

/**
 * 单个sheet下载
 * @param {object[]} json json
 * @param {object} tableTitle excel表头名称
 * @param {string} fileName 文件名称
 * @param {object} wbConfig 扩展
 * @param {object} woptsConfig 扩展
 */
function json2Excel(json,tableTitle,fileName,wbConfig={},woptsConfig={}) {
    let wopts = {
        bookType: 'xlsx',
        bookSST: false, 
        type: 'binary'
    };
    let workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
    };
    json = [tableTitle,...json];
    workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头

    //3、XLSX.write() 开始编写Excel表格
    //4、changeData() 将数据处理成需要输出的格式
    saveAs(new Blob([changeData(XLSX.write({...workBook,...wbConfig}, {...wopts,...woptsConfig}))], {type: 'application/octet-stream'}),fileName)
}
/**
 * 多个sheet下载
 * @param {object} data 
 * @param data.Sheet1.title {}
 * @param data.Sheet1.data []
 * @param {string} fileName 文件名称
 * data格式
 * {
    'sheet1':{
        title:{name:'名字',age:'年龄'},
        json:[{name:'sd',age:1999}]
    },
    'sheet2':{
        title:{name:'名字',age:'年龄'},
        json:[{name:'z',age:195}]
    },
    }
 */

function json2ExcelMultiSheet(data,fileName){
    let wopts = {
        bookType: 'xlsx',
        bookSST: false, 
        type: 'binary'
    };
    let workBook = {
        SheetNames: [],
        Sheets: {},
        Props: {}
    };
    let keys = Object.keys(data);
    keys.forEach(key=>{
        let json = [data[key].title,...data[key].json];
        workBook.SheetNames.push(key);
        workBook.Sheets[key] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头
    })
    // XLSX.write() 开始编写Excel表格
    //changeData() 将数据处理成需要输出的格式
    saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}),fileName)
}
function changeData(s) {

//如果存在ArrayBuffer对象(es6) 最好采用该对象
    if (typeof ArrayBuffer !== 'undefined') {
        
        //1、创建一个字节长度为s.length的内存区域
        let buf = new ArrayBuffer(s.length);
        
        //2、创建一个指向buf的Unit8视图,开始于字节0,直到缓冲区的末尾
        let view = new Uint8Array(buf);
        
        //3、返回指定位置的字符的Unicode编码
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;

    } else {
        let buf = new Array(s.length);
        for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}
function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式 

    let tmpa = document.createElement("a");

    tmpa.download = fileName+'.xlsx' || "下载.xlsx";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载

    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);

}

方法调用:
这里只演示单个sheet下载

let excelData = [
    { "c1": "990019", "c2": "张三1", "c3": "女", },
    { "c1": "140007", "c2": "张三2", "c3": "女", },
]
json2Excel(excelData, { "c1": "ID(编号)", "c2": "NAME(名称)", "c3": "c3", }, "test")

二、JS读取excel文件内容

这里使用了上面说的xlsx.js库,所以需先安装xlsx

先通过本地导入要读取的excel文件

<div id="import">
	<p>导入模版</p>
    <p> 请选择要选择导入的模版文件</p>
    <input type="file" onchange="importFile(this)">
    <div id="demo"></div>
</div>

将excel解析为json后写入元素

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importFile(obj) {//导入
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    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'//以二进制的方式读取
            });
        }

        console.log('wb: ', wb);
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        // XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { raw: false }); //以字符串形式读取。
        console.log('XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]): ', XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
        document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));

    };
    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;
}

完美,成功解析:
在这里插入图片描述



参考资料:

https://www.npmjs.com/package/xlsx

https://blog.csdn.net/weixin_43660626/article/details/106780365

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/154517.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《C++避坑神器·二十一》回调函数使用

1、不涉及类的回调函数使用&#xff1a; 注意&#xff1a;提供给别人使用的就是注册回调函数的那个接口 void registHeightcallback(CallbackFun callback, void* contex) 2、涉及类的回调函数使用&#xff1a; 一般提供给别人使用的都是注册回调函数的接口 在类中定义的回调函…

如何实时提取微信群收到的二维码图片?

10-4 在有些工作中&#xff0c;需要实时提取在微信中收到的二维码图片&#xff0c;比如微信里有一百个群&#xff0c;怎么才能知道这些群里发了二维码出来&#xff0c;要实现这样的功能&#xff0c;微信本身并不提供&#xff0c;但是可以通过一些其它技巧完成。 大概的原理是…

向量以及矩阵

0.前言 好了那我们新的征程也即将开始&#xff0c;那么在此呢我也先啰嗦两句&#xff0c;本篇文章介绍数学基础的部分&#xff0c;因为个人精力有限我不可能没一字一句都讲得非常清楚明白&#xff0c;像矩阵乘法之类的一些基础知识我都是默认你会了&#xff08;还不会的同学推…

平均分(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…

【Synopsys Bug记录】Synopsys工具显示license过期

首先查找网络配置&#xff0c;打开终端&#xff0c;输入ifconfig&#xff0c;看是否有ens33 若没有ens33&#xff0c;则说明linux的网卡因为某些原因未启用&#xff0c;我们需要更改ifcfg-ens33文件&#xff1b; 输入指令 cd ./etc/sysconfig/network-scripts sudo vim ifcfg-…

leetcode每日一题-周复盘

前言 该系列文章用于我对一周中leetcode每日一题or其他不会的题的复盘总结。 一方面用于自己加深印象&#xff0c;另一方面也希望能对读者的算法能力有所帮助&#xff0c; 同时也希望能帮助同样坚持刷题的同学加深印象~ 该复盘对我来说比较容易的题我会复盘的比较粗糙&#…

SpringBoot 事务与AOP

目录 事务Spring事务管理 TransactionalSpring事务进阶-rollbackFor与propagation属性 AOP(面向切面编程)AOP入门案例实现-Aspect & AOP核心概念AOP进阶通知类型 Around、Before、After和PointCut抽取切入点表达式通知顺序 Order切入点表达式 execution(……)与annotation(…

c语言-浅谈指针(2)

文章目录 1.数组名的理解2.使用指针访问数组3.一维数组传参的本质4.二级指针5.指针数组 本篇文章是关于数组与指针的&#xff0c;在上一篇指针内容的基础上进一步了解指针 1.数组名的理解 我们先来了解一个知识点&#xff1a;在给指针变量赋值时&#xff0c;数组用数组名赋给指…

服务器集群配置LDAP统一认证高可用集群(配置tsl安全链接)-centos9stream-openldap2.6.2

写在前面 因之前集群为centos6&#xff0c;已经很久没升级了&#xff0c;所以这次配置统一用户认证也是伴随系统升级到centos9时一起做的配套升级。新版的openldap配置大致与老版本比较相似&#xff0c;但有些地方配置还是有变化&#xff0c;另外&#xff0c;铺天盖地的帮助文…

YOLO目标检测——谢韦尔钢材缺陷检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;钢材质量控制、钢材缺陷检测数据集说明&#xff1a;谢韦尔钢材缺陷检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(jso…

LeetCode - #89 格雷编码

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅&#xff08;Netflix 增长黑客&#xff0c;《iOS 面试之道》作者&#xff0c;ACE 职业健身教练。&#xff09;的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

运行游戏“找不到XINPUTI_3.dll无法继续执行代码,总共有五种解决方案

xinput1_3.dll是Windows操作系统中的一款动态链接库&#xff08;DLL&#xff09;文件&#xff0c;主要作用是为DirectX输入提供支持。DirectX是微软推出的一套多媒体应用程序开发接口&#xff0c;广泛应用于游戏、多媒体制作等领域。xinput1_3.dll文件包含了许多与输入设备相关…

Squeeze-and-Excitation Networks总结

介绍 关注通道关系&#xff0c;并提出了一种新的架构单元&#xff0c;我们称之为 "压缩-激发"&#xff08;SE&#xff09;块&#xff0c;目的是通过明确建模卷积特征通道之间的相互依存关系&#xff0c;提高网络生成的表征质量。为此&#xff0c;提出了一种允许网络…

【深度学习】吴恩达课程笔记(四)——优化算法

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【吴恩达课程笔记专栏】 【深度学习】吴恩达课程笔记(一)——深度学习概论、神经网络基础 【深度学习】吴恩达课程笔记(二)——浅层神经网络、深层神经网络 【深度学习】吴恩达课程笔记(三)——参数VS超参数、深度…

【chatglm3】(4):如何设计一个知识库问答系统,参考智谱AI的知识库系统,

0&#xff0c;视频地址 https://www.bilibili.com/video/BV16j411E7FX/?vd_source4b290247452adda4e56d84b659b0c8a2 【chatglm3】&#xff08;4&#xff09;&#xff1a;如何设计一个知识库问答系统&#xff0c;参考智谱AI的知识库系统&#xff0c;学习设计理念&#xff0c;…

unity3d与vs 附加到unity debug报错

点击 附加到unity报错 选择在 调试-》附加unity->选择unity实例

1、LeetCode之两数之和

两数之和 给定一个整数数组 nums和一个目标值target&#xff0c;请你在该数组中找出和为目标值的那两个整数&#xff0c;并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是&#xff0c;你不能重复利用这个数组中同样的元素。 nums [2,7,11,15]target 9[0,1]枚…

C++ STL简介

1. 什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 2. STL的版本 原始版本 Alexander Stepanov、Meng Lee 在惠普实验室…

Unity 代码控制Text文本换行

Unity 要通过代码控制Text文本换行&#xff0c;实现方法比较简单&#xff0c;无论是传统的Text&#xff0c;还是TMP文本&#xff0c;都是通过在字符串需要换行的地方加上换行符【\n】。 不过在Text属性栏中要确保设置自动换行模式&#xff1a; 如传统的设置如图&#xff1a; …