web-dev-qa-db-ja.com

JavaScriptを使用してファイルを.csvファイルとしてダウンロードする

こんにちは。ファイルを.csvファイルとしてエクスポートしようとしているため、ユーザーがダウンロードボタンをクリックすると、ブラウザは自動的にファイルを.csvとしてダウンロードします。また、エクスポートする.csvファイルの名前を設定できるようにしたい

私はこれを行うためにjavascriptを使用しています

コードは次のとおりです。

 function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
            for (var index in array[i]) {
                if (line != '') line += ','

                line += array[i][index];
            }

            str += line + '\r\n';
        }

        return str;
    }

    // Example
    $(document).ready(function () {

        // Create Object
        var items = [
              { "name": "Item 1", "color": "Green", "size": "X-Large" },
              { "name": "Item 2", "color": "Green", "size": "X-Large" },
              { "name": "Item 3", "color": "Green", "size": "X-Large" }];

        // Convert Object to JSON
        var jsonObject = JSON.stringify(items);

        // Display JSON
        $('#json').text(jsonObject);

        // Convert JSON to CSV & Display CSV
        $('#csv').text(ConvertToCSV(jsonObject));

        $("#download").click(function() {
            alert("2");
            var csv = ConvertToCSV(jsonObject);
            window.open("data:text/csv;charset=utf-8," + escape(csv))
            ///////


        });

    });

この問題について、私のボスが私の首を呼吸していることをアドバイスしてください

助けてください

javascriptcsv
16
Samuel Tang

このスレッドでソリューションを作成しました： window.openを使用してファイル名を設定する方法

これは簡単な解決策です。

 $("#download_1").click(function() {
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
var json = $.parseJSON(json_pre);

var csv = JSON2CSV(json);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";

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

JSON2CSV関数

function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var line = '';

    if ($("#labels").is(':checked')) {
        var head = array[0];
        if ($("#quote").is(':checked')) {
            for (var index in array[0]) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[0]) {
                line += index + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }
    return str;
}
25
Jewel

最近のブラウザでは、アンカーに新しい属性があります。

download

http://caniuse.com/download

ので、代わりに

window.open("data:text/csv;charset=utf-8," + escape(csv))

ダウンロードリンクを作成します。

<a href="data:text/csv;charset=utf-8,'+escape(csv)+'" download="filename.csv">download</a>

別の解決策は、phpを使用することです

[〜＃〜] edit [〜＃〜]

私はjQueryを使用しませんが、コードを編集して、そのような機能を持つダウンロードリンクを追加する必要があります。

var csv=ConvertToCSV(jsonObject),
a=document.createElement('a');
a.textContent='download';
a.download="myFileName.csv";
a.href='data:text/csv;charset=utf-8,'+escape(csv);
document.body.appendChild(a);
19
cocco

JSONをCSVドキュメントにエクスポートしてダウンロードしようとしていたので、将来人々のためにここにコードを追加したかっただけです。

_$.getJSON_を使用して外部ページからjsonデータをプルしますが、基本的な配列がある場合はそれを使用できます。

これは Christian Landgren's コードを使用してcsvデータを作成します。

_$(document).ready(function() {
    var JSONData = $.getJSON("GetJsonData.php", function(data) {
        var items = data;
        const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
        const header = Object.keys(items[0]);
        let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
        csv.unshift(header.join(','));
        csv = csv.join('\r\n');

        //Download the file as CSV
        var downloadLink = document.createElement("a");
        var blob = new Blob(["\ufeff", csv]);
        var url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = "DataDump.csv";  //Name the file here
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
});
_

編集：_JSON.stringify_は_\"_を追加することで引用符内の引用符をエスケープすることに注意してください。 CSVをExcelで表示する場合、エスケープ文字としては気に入らないでしょう。

.replace(/\\"/g, '""')をJSON.stringify(row[fieldName], replacer)の最後に追加して、Excelでこれを適切に表示できます（これにより、_\"_が_""_に置き換えられます。これはExcelが好むものです）。

フルライン：JSON.stringify(row[fieldName], replacer).replace(/\\"/g, '""')

2
user1274820

これらの例を試してください：

例1：

JsonArray = [{
    "AccountNumber": "1234",
    "AccountName": "abc",
    "port": "All",
    "source": "sg-a78c04f8"

}, {
    "Account Number": "1234",
    "Account Name": "abc",
    "port": 22,
    "source": "0.0.0.0/0",
}]

JsonFields = ["Account Number","Account Name","port","source"]

function JsonToCSV(){
    var csvStr = fields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName   = element.AccountName;
        port          = element.port
        source        = element.source

        csvStr += AccountNumber + ',' + AccountName + ','  + port + ',' + source + "\n";
        })
        return csvStr;
}

次のコードを使用してcsvファイルをダウンロードできます。

function downloadCSV(csvStr) {

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvStr);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'output.csv';
    hiddenElement.click();
}
0
YouBee