JSON转换为CSV/XLS不会在IE上保存文件 [英] JSON to CSV / XLS does not save a file on IE

问题描述

我提供以下服务:

angular.module('LBTable').service('exportTable', function () {
    function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, fileName) {
        //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
        fileName = (fileName != null ? fileName : 'Report');
        //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/xls;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 + ".xls";

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

    return {
        exportCSV: JSONToCSVConvertor
    }
});

基本上，此操作是获取一个JSON对象并将其转换为csv文件，然后由用户下载

Basicly what this does is to take a JSON object and converts it into a csv file that is then downloaded by the user

这在Chrome和Firefox中工作正常，但是在IE(即使是最新版本)中也没有文件下载，控制台也不会引发任何错误.

this works fine in Chrome and Firefox however in IE (even the newest) no file is downloaded and the console does not throw any errors.

我的问题是为什么? :(

My question is why? :(

(简化的小提琴)

小提琴

推荐答案

原因是IE不支持标记中的download属性.解决方法是可以使用blob

the Reason is IE doesn't support the download attribute in a tag. The work around is you can Use blob

1. 将JSON转换为CSV

1. Convert the JSON to CSV

检查当前浏览器是否可以使用以下代码

Check the current browser for that you can use the below code

 getInternetExplorerVersion() {
            var rv = -1;
            if (navigator.appName == 'Microsoft Internet Explorer') {
                var ua = navigator.userAgent;
                var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                if (re.exec(ua) != null)
                    rv = parseFloat(RegExp.$1);
            }
            else if (navigator.appName == 'Netscape') {
                var ua = navigator.userAgent;
                var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                if (re.exec(ua) != null)
                    rv = parseFloat(RegExp.$1);
            }
            return rv;
        }

1. 如果浏览器是IE

var blob = new Blob([CSV], { type: "text/csv;charset=utf-8;" });
navigator.msSaveBlob(blob, fileName + ".csv")

这将在IE中起作用

这篇关于JSON转换为CSV/XLS不会在IE上保存文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！