JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

本文主要是介绍JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

<html>
<head>
</head>
<body>

<script type="text/javascript">

function jsexport(){
    var jsonData = [{name:"张三", sex:"男", age:46},{name:"李四", sex:"男", age:20},{name:"王五", sex:"男", age:33},{name:"赵六", sex:"男", age:80}];
   
    var GridData = JSON.parse(JSON.stringify(jsonData))
    JSONToCSV(GridData, "UserReport.csv", true);
}

var blob;
var filename;
function c(){
window.navigator.msSaveOrOpenBlob(blob, filename);
}

function JSONToCSV(JSONData, ReportName, ShowLabel) {
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var CSV = '';    
    if (ShowLabel) {
        var row = "";
        
        for (var index in arrData[0]) {
            row += index + ',';
        }
        row = row.slice(0, -1);
        CSV += row + '\r\n';
    }
    
    for (var i = 0; i < arrData.length; i++) {
        var row = "";
        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }
        row.slice(0, row.length - 1);
        //add a line break after each row
        CSV += row + '\r\n';
console.log(CSV);
    }


    if (CSV == '') {        
        alert("数据有错误");
        return;
    }   
    
    var link = document.createElement("a");    
    link.id="lnkDwnldLnk";
link.name="lnkDwnldLnk";
link.setAttribute("style", "display:none");


    var ifdo = document.createElement("iframe");    
    ifdo.id="ifdiframe";
ifdo.name="ifdiframe";
ifdo.setAttribute("style", "display:none");
    
    document.body.appendChild(link);
document.body.appendChild(ifdo);
   
var csv = CSV;
try
{
blob = new Blob([csv], { type: 'text/txt' }); 
}
catch (e)
{
blob = [csv];
}

var csvUrl = "";
filename = ReportName;
    if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) { 
        csvUrl = window.webkitURL.createObjectURL(blob); 
link.setAttribute("download", filename);
link.setAttribute("href", csvUrl);
link.click();
    } 
    if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
        csvUrl = window.URL.createObjectURL(blob); 
link.setAttribute("download", filename);
link.setAttribute("href", csvUrl);
link.click();
    } 
    else { 
if(window.navigator.msSaveOrOpenBlob) { //IE>=10
link.addEventListener('click', function() {
window.navigator.msSaveOrOpenBlob(blob, filename);
});
link.click();


        } else { //支持IE9、IE8;  IE7及以下暂不支持,因为不支持JSON
            var ifd = document.getElementById('ifdiframe').contentDocument;
ifd.open('text/plain', 'replace');
ifd.write('\r\n\r\n' + csv);
ifd.close();
ifd.execCommand('SaveAs', null, filename);
        }
    }
  
    document.body.removeChild(link);
document.body.removeChild(ifdo);
}

</script>
<input type="Button" id="bygen" value="导出" οnclick="jsexport()"/ >

<br>
<a id="mydownload" name="mydownload" href="#" >导出</a>

</html>



纯原生js代码,本人原创,未经许可可随意转载

这篇关于JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/842359

相关文章

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象(BLOB)数据类型,用于存储大量的二进制数据,:本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro

C#使用Spire.XLS快速生成多表格Excel文件

《C#使用Spire.XLS快速生成多表格Excel文件》在日常开发中,我们经常需要将业务数据导出为结构清晰的Excel文件,本文将手把手教你使用Spire.XLS这个强大的.NET组件,只需几行C#... 目录一、Spire.XLS核心优势清单1.1 性能碾压:从3秒到0.5秒的质变1.2 批量操作的优雅

Python实现数据可视化图表生成(适合新手入门)

《Python实现数据可视化图表生成(适合新手入门)》在数据科学和数据分析的新时代,高效、直观的数据可视化工具显得尤为重要,下面:本文主要介绍Python实现数据可视化图表生成的相关资料,文中通过... 目录前言为什么需要数据可视化准备工作基本图表绘制折线图柱状图散点图使用Seaborn创建高级图表箱线图热

MySQL数据脱敏的实现方法

《MySQL数据脱敏的实现方法》本文主要介绍了MySQL数据脱敏的实现方法,包括字符替换、加密等方法,通过工具类和数据库服务整合,确保敏感信息在查询结果中被掩码处理,感兴趣的可以了解一下... 目录一. 数据脱敏的方法二. 字符替换脱敏1. 创建数据脱敏工具类三. 整合到数据库操作1. 创建服务类进行数据库

MySQL中处理数据的并发一致性的实现示例

《MySQL中处理数据的并发一致性的实现示例》在MySQL中处理数据的并发一致性是确保多个用户或应用程序同时访问和修改数据库时,不会导致数据冲突、数据丢失或数据不一致,MySQL通过事务和锁机制来管理... 目录一、事务(Transactions)1. 事务控制语句二、锁(Locks)1. 锁类型2. 锁粒

Android 缓存日志Logcat导出与分析最佳实践

《Android缓存日志Logcat导出与分析最佳实践》本文全面介绍AndroidLogcat缓存日志的导出与分析方法,涵盖按进程、缓冲区类型及日志级别过滤,自动化工具使用,常见问题解决方案和最佳实... 目录android 缓存日志(Logcat)导出与分析全攻略为什么要导出缓存日志?按需过滤导出1. 按

Qt中实现多线程导出数据功能的四种方式小结

《Qt中实现多线程导出数据功能的四种方式小结》在以往的项目开发中,在很多地方用到了多线程,本文将记录下在Qt开发中用到的多线程技术实现方法,以导出指定范围的数字到txt文件为例,展示多线程不同的实现方... 目录前言导出文件的示例工具类QThreadQObject的moveToThread方法实现多线程QC

SpringBoot集成EasyExcel实现百万级别的数据导入导出实践指南

《SpringBoot集成EasyExcel实现百万级别的数据导入导出实践指南》本文将基于开源项目springboot-easyexcel-batch进行解析与扩展,手把手教大家如何在SpringBo... 目录项目结构概览核心依赖百万级导出实战场景核心代码效果百万级导入实战场景监听器和Service(核心