Question

我的目标是简单地获取JSON并将其导出为CSV文件。理想情况下，用户会在Web浏览器中收到提示，询问是保存还是打开CSV文件。

我遇到了许多需要调用服务器进行JSON到Excel / CSV转换的示例，但我确实需要一个仅限JavaScript的解决方案。我发现this particular fiddle很有用。

当它与Chrome（v39）一起运行时效果很好，但在IE11中没有任何反应。事实上，我在IE的控制台中看到了几个错误，如下所示：

enter image description here

我仍然在试图弄清楚这些错误是否是浏览器特定的，我认为它们是。如果是这样，如果有任何解决方法。由于我的目标浏览器是IE，“但它适用于Chrome，因此使用它”对我没有任何帮助。我花了好几个小时试图为此找到一个解决方法无济于事，所以任何指向正确方向的人都会非常感激。

下面是上述小提琴的逐字复制和粘贴：

HTML

<div class='mydiv'>    
    <textarea id="txt" class='txtarea'>
    [{"Vehicle":"BMW","Date":"30, Jul 2013 09:24 AM","Location":"Hauz Khas, Enclave, New Delhi, Delhi, India","Speed":42},{"Vehicle":"Honda CBR","Date":"30, Jul 2013 12:00 AM","Location":"Military Road,  West Bengal 734013,  India","Speed":0},{"Vehicle":"Supra","Date":"30, Jul 2013 07:53 AM","Location":"Sec-45, St. Angel's School, Gurgaon, Haryana, India","Speed":58},{"Vehicle":"Land Cruiser","Date":"30, Jul 2013 09:35 AM","Location":"DLF Phase I, Marble Market, Gurgaon, Haryana, India","Speed":83},{"Vehicle":"Suzuki Swift","Date":"30, Jul 2013 12:02 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Civic","Date":"30, Jul 2013 12:00 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Accord","Date":"30, Jul 2013 11:05 AM","Location":"DLF Phase IV, Super Mart 1, Gurgaon, Haryana, India","Speed":71}]
    </textarea>
    <button class='gen_btn'>Generate File</button>
</div>

脚本

$(document).ready(function(){
    $('button').click(function(){
        var data = $('#txt').val();
        if(data == '')
            return;
        JSONToCSVConvertor(data, "Vehicle Report", true);
    });
});

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var CSV = '';    
    //Set Report title in first row or line

    CSV += ReportTitle + '\r\n\n';

    //This condition will generate the Label/Header
    if (ShowLabel) {
        var row = "";

        //This loop will extract the label from 1st index of on array
        for (var index in arrData[0]) {
            //Now convert each value to string and comma-seprated
            row += index + ',';
        }
        row = row.slice(0, -1);

        //append Label row with line break
        CSV += row + '\r\n';
    }

    //1st loop is to extract each row
    for (var i = 0; i < arrData.length; i++) {
        var row = "";

        //2nd loop will extract each column and convert it in string comma-seprated
        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';
    }

    if (CSV == '') {        
        alert("Invalid data");
        return;
    }   

    //Generate a file name
    var fileName = "MyReport_";
    //this will remove the blank-spaces from the title and replace it with an underscore
    fileName += ReportTitle.replace(/ /g,"_");   

    //Initialize file format you want csv or xls
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

    // Now the little tricky part.
    // you can use either>> window.open(uri);
    // but this will not work in some browsers
    // or you will not get the correct file extension    

    //this trick will generate a temp <a /> tag
    var link = document.createElement("a");    
    link.href = uri;

    //set the visibility hidden so it will not effect on your web-layout
    link.style = "visibility:hidden";
    link.download = fileName + ".csv";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Answer 1

您是托管jquery文件还是通过CDN访问它？尝试使用Google的CDN。 https://developers.google.com/speed/libraries/devguide#jquery

这是代码生成错误的地方。

Error Message

Answer 2

问题是由于IE不支持导出CSV文件的数据URI： https://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx

其他浏览器可以。我知道这是一个老问题。我希望你在过去几个月里找到了解决方法吗？

JSON到CSV导出适用于Chrome，而不适用于IE

2 个答案: