• js将json数据以csv格式下载


    摘要:

      最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护。但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地。

    代码:

    <!DOCTYPE html>
    <html>
        <title>download csv</title>
        <head>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
            <script type="text/javascript" src="download.js"></script>
        </head>
        <body>
            <div align="center">
                <h3><u>Enter JSON data</u></h3>
                <div class='mydiv'>
                        <textarea id="txt" class='txtarea' rows="15" cols="100">[{"Vehicle":"BMW","Date":"30 Jul 2013 09:24 AM","Location":"Hauz Khas","Speed":42},{"Vehicle":"Honda CBR","Date":"30 Jul 2013 12:00 AM","Location":"Military Road","Speed":0},{"Vehicle":"Supra","Date":"30 Jul 2013 07:53 AM","Location":"Sec-45","Speed":58},{"Vehicle":"Land Cruiser","Date":"30 Jul 2013 09:35 AM","Location":"DLF Phase I","Speed":83}]</textarea>
                </div>
                <br/>
                <button class="download">Download CSV</button>
            </div>
        </body>
    </html>

    download.js

    $(document).ready(function() {
        "use strict";
        var mo = {
            init: function() {
                $('.download').click(function() {
                    var data = $('#txt').val();
                    if (data === '') {
                        return;
                    }
                    mo.JSONToCSVConvertor(data, true);
                });
            },
            JSONToCSVConvertor: function(JSONData, 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 + '
    ';
                }
                for (var i = 0; i < arrData.length; i++) {
                    var row = "";
                    for (var index in arrData[i]) {
                        var arrValue = arrData[i][index] == null ? "" : '="' + arrData[i][index] + '"';
                        row += arrValue + ',';
                    }
                    row.slice(0, row.length - 1);
                    CSV += row + '
    ';
                }
                if (CSV == '') {
                    growl.error("Invalid data");
                    return;
                }
                var fileName = "Result";
                if (mo.msieversion()) {
                    var IEwindow = window.open();
                    IEwindow.document.write('sep=,
    ' + CSV);
                    IEwindow.document.close();
                    IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
                    IEwindow.close();
                } else {
                    var uri = 'data:application/csv;charset=utf-8,' + escape(CSV);
                    var link = document.createElement("a");
                    link.href = uri;
                    link.style = "visibility:hidden";
                    link.download = fileName + ".csv";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            },
            msieversion: function() {
                var ua = window.navigator.userAgent;
                var msie = ua.indexOf("MSIE ");
                if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // If Internet Explorer, return version number 
                {
                    return true;
                } else { // If another browser, 
                    return false;
                }
                return false;
            },
            main: function() {
                mo.init();
            }
        };
        mo.main();
    
    });

    小结:

      注意json格式[{},{}],文件名是在js中定义的变量fileName。主要问题是他会自动添加一行空行,且每个元素都会在值前面加个'='。

    下载下来的数据格式为:

  • 相关阅读:
    MySQL练习
    [转]mysql和redis的区别
    python框架面试题联系
    国内外免费接收短信验证码
    ubuntu环境下docker的安装与操作
    Django商城项目笔记No.18商品部分-数据表创建
    Django商城项目笔记No.17用户部分-用户中心用户地址管理
    Django商城项目笔记No.16用户部分-用户中心收货地址
    Django商城项目笔记No.15用户部分-用户中心邮箱验证
    Django商城项目笔记No.14用户部分-用户中心邮箱绑定
  • 原文地址:https://www.cnblogs.com/xiyangbaixue/p/4210278.html
Copyright © 2020-2023  润新知