web-dev-qa-db-fra.com

Utilisation de javascript pour télécharger le fichier en tant que fichier.csv

Bonjour, j'essaie d'exporter un fichier au format .csv afin que, lorsque l'utilisateur clique sur le bouton de téléchargement, le navigateur télécharge automatiquement le fichier au format .csv ..__ Fichier .csv à exporter 

J'utilise javascript pour faire cela

Le code est ci-dessous:

 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))
            ///////


        });

    });

S'il vous plaît conseiller sur ceMon patron respire mon cou sur cette question 

S'il vous plaît aider

javascriptcsv
14
Samuel Tang

J'ai écrit une solution dans ce fil de discussion: comment définir un nom de fichier en utilisant window.open

C'est la solution simple:

 $("#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);
});

Fonction 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;
}
23
Jewel

dans les navigateurs modernes, il existe un nouvel attribut dans les ancres.

download

http://caniuse.com/download

donc au lieu d'utiliser 

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

créer un lien de téléchargement:

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

une autre solution consiste à utiliser php

MODIFIER 

je n'utilise pas jQuery, mais vous devez modifier votre code pour ajouter le lien de téléchargement avec quelque chose comme ça dans votre fonction.

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);
16
cocco

Je voulais simplement ajouter du code ici pour les futurs utilisateurs, car j'essayais d'exporter JSON vers un document CSV et de le télécharger.

J'utilise $.getJSON pour extraire les données JSON d'une page externe, mais si vous avez un tableau de base, vous pouvez simplement l'utiliser.

Ceci utilise Christian Landgren's code pour créer les données 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);
    });
});

Edit: Il est intéressant de noter que JSON.stringify échappera les guillemets en ajoutant \". Si vous affichez le fichier CSV dans Excel, cela n’est pas le cas en tant que caractère d'échappement.

Vous pouvez ajouter .replace(/\\"/g, '""') à la fin de JSON.stringify(row[fieldName], replacer) pour l'afficher correctement dans Excel (cela remplacera \" par "", comme le préfère Excel).

Ligne complète: JSON.stringify(row[fieldName], replacer).replace(/\\"/g, '""')

1
user1274820