javascript - DownloadSave CSV file - PapaParse - Stack Overflow

admin管理员组

文章数量:1201992

PROBLEM:
Downloaded CSV file is blank (unparse() method to conver array/JSON to CSV).

DETAIL:
Papaparse is working fine when parse CSV file to JavaScript array. But when I feed that array data or JSON data to unparse() method, its not working.

Angular JS method:

$scope.downloadCSV = function(){
    var csv = Papa.unparse($scope.final_array);
    console.log($scope.final_array);
    console.log(csv);
    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob) {
        csvURL = navigator.msSaveBlob(csvData, 'download.csv');
    } else {
        csvURL = window.URL.createObjectURL(csvData);
    }
    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'download.csv');
    tempLink.click();
}

$scope.final_array contains data as:

On above code, console.log(csv); displays blank on the console.

In short: var csv = Papa.unparse($scope.final_array); is not working.

UPDATE
The posted array help me to generate following table and the button "Save Generated CSV" is not working and the code posted is for the this action button.

PROBLEM:
Downloaded CSV file is blank (unparse() method to conver array/JSON to CSV).

DETAIL:
Papaparse is working fine when parse CSV file to JavaScript array. But when I feed that array data or JSON data to unparse() method, its not working.

Angular JS method:

$scope.downloadCSV = function(){
    var csv = Papa.unparse($scope.final_array);
    console.log($scope.final_array);
    console.log(csv);
    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob) {
        csvURL = navigator.msSaveBlob(csvData, 'download.csv');
    } else {
        csvURL = window.URL.createObjectURL(csvData);
    }
    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'download.csv');
    tempLink.click();
}

$scope.final_array contains data as:

On above code, console.log(csv); displays blank on the console.

In short: var csv = Papa.unparse($scope.final_array); is not working.

UPDATE
The posted array help me to generate following table and the button "Save Generated CSV" is not working and the code posted is for the this action button.

• javascript
• arrays
• papaparse

Share Improve this question Follow edited Sep 12, 2018 at 8:30 Bharata 14.2k66 gold badges4343 silver badges5353 bronze badges asked Sep 8, 2018 at 23:41 BetaDevBetaDev 4,67433 gold badges2525 silver badges4848 bronze badges 2

• How can I copy that array from the console ?? – BetaDev Commented Sep 11, 2018 at 20:54
• Also would be great to add tempLink.remove() at the end of the function to prevent them building up on the page. – Ben Winding Commented Aug 5, 2020 at 3:31

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 13

Your mistake: if we view your console screenshot we will see that you have some mishmash in your array code from arrays and objects. In your code you have some like this:

var array =
[
    [question1: "A", question2: "A"],
    [question1: "A B", question2: "B"]
];

But it is incorrect and must to be some like this:

var array =
[
    {question1: "A", question2: "A"},
    {question1: "A B", question2: "B"}
];

You have to correct it.

Working example

See this Codepen demo because StackOverflow snippets are in sandbox and because of this do not work.

var array =
[
    {
        question1: "А",
        question2: "А",
        question3: "mike",
        question1_A: "TRUE",
        question1_B: "FALSE",
        question1_C: "FALSE",
        question1_D: "FALSE"
    },
    {
        question1: "A В",
        question2: "В",
        question3: "dan",
        question1_A: "TRUE",
        question1_B: "TRUE",
        question1_C: "FALSE",
        question1_D: "FALSE"
    },
    {
        question1: "B C D",
        question2: "А В С",
        question3: "tango",
        question1_A: "FALSE",
        question1_B: "TRUE",
        question1_C: "TRUE",
        question1_D: "TRUE"
    },
    {
        question1: "A D",
        question2: "С",
        question3: "charlie",
        question1_A: "TRUE",
        question1_B: "FALSE",
        question1_C: "FALSE",
        question1_D: "TRUE"
    },
    {
        question1: "В",
        question2: "А",
        question3: "bob",
        question1_A: "FALSE",
        question1_B: "TRUE",
        question1_C: "FALSE",
        question1_D: "FALSE"
    },
    {
        question1: "C D",
        question2: "А",
        question3: "john",
        question1_A: "FALSE",
        question1_B: "FALSE",
        question1_C: "FALSE",
        question1_D: "FALSE"
    }
];


function downloadCSV()
{
    var csv = Papa.unparse(array);

    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob)
    {
        csvURL = navigator.msSaveBlob(csvData, 'download.csv');
    }
    else
    {
        csvURL = window.URL.createObjectURL(csvData);
    }

    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'download.csv');
    tempLink.click();
}

<script src="https://www.papaparse.com/resources/js/papaparse.js"></script>
<input type="button" value="download CSV" onclick="downloadCSV()">

For further information see the documentation from Papa's unparse function.

You are trying to unparse an array of arrays which is just plain data without the column names.

To use the column names you might want to use the array of objects version. Rewrite your final_array as:

$scope.final_array = [
    { question1: "A", question2: "A", question3: "mike" },
    { question1: "A B", question2: "B", question3: "dan" },
];

Alternatively you can separate your column names and the data in a single object as follows:

$scope.final_object = {
    fields: [ "question1", "question2", "question3" ],
    data: [
        [ "A", "A", "mike" ],
        [ "A B", "B", "dan", ],
    ],
};

If you need to convert $scope.final_array maybe the following snippet will help you:

function convertFinal(arrOfArr) {
    return arrOfArr.map(function(arr) {
        var obj = {};
        for(var key in arr) {
            if(arr.hasOwnProperty(key)) {
                obj[key] = arr[key];
            }
        }
        return obj;
    });
}

var csv = Papa.unparse(convertFinal($scope.final_array));

本文标签： javascriptDownloadSave CSV filePapaParseStack Overflow