下载/保存CSV文件 - PapaParse

Question

问题：
下载的CSV文件为空（使用unparse()方法将数组/JSON转换为CSV格式）。

详情：
当使用Papaparse将CSV文件解析成JavaScript数组时，一切都正常。但是当我将该数组数据或JSON数据传递给unparse()方法时，它无法正常工作。

Angular JS 方法：

$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包含数据如下：

在上面的代码中，console.log(csv); 在控制台上显示为空。

简而言之：var csv = Papa.unparse($scope.final_array);无法运行。

更新
张贴的数组帮助我生成了以下表格，“保存生成的CSV”按钮不起作用，所张贴的代码是针对该操作按钮的。

- BetaDev

---

我该如何从控制台复制那个数组？ - BetaDev

在函数末尾添加tempLink.remove()将防止它们在页面上累积。 - Ben Winding

Answer 1

你的错误：如果我们查看你的控制台截图，我们会发现在数组代码中，你将一些对象和数组弄混在了一起。在你的代码中有类似这样的内容：

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

但这是不正确的，应该像这样：

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

你需要纠正它。

工作样例

请参见此Codepen演示，因为StackOverflow片段在沙箱中，因此无法使用。

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()">

欲知详情，请参阅Papa的unparse函数文档。

- Bharata

---

如何将我的数组对象变成你的数组？ - BetaDev

@WebDev，我想回答你的问题，但我不知道为什么会出现这样的损坏对象，因为在正常的JS中，您将收到此对象的错误。但可能是因为您使用了Angular JS（我不是Angular JS的专家）。尝试使用console.log(JSON.stringify(array, null, '\t'));在控制台中打印您的数组。 - Bharata

谢谢你的回答，我尝试了第一个回答，因为@BeyelerStudios先发布了。那解决了我的问题。但是你的想法/答案也是正确的，所以点赞。谢谢。 - BetaDev

我稍后会与您分享一个 jsfiddle，以展示如何获取看起来像那样的数组数组。 - Kirk Larkin

为了澄清一下 - 我所说的关于“不可能”的评论是你在这里的答案中的第一个代码片段。你使用的语法是无效的，因为你不能像那样声明具有命名属性的数组。我链接的 CodePen 显示了如何实现类似的结果，但实际上数组本身是空的。 - Kirk Larkin

Answer 2

您正在尝试对不带列名的纯数据进行“取消解析”（unparse），该数据是由数组组成的二维数组。

如果要使用列名，则可能需要使用包含对象的数组。请将您的final_array重新编写为：

```javascript var final_array = [ {col1: 'data1', col2: 'data2'}, {col1: 'data3', col2: 'data4'} ]; ```

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

或者您可以按以下方式将列名和数据分开存储在单个对象中：

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

如果你需要转换$scope.final_array，以下代码片段可能会对你有帮助：

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

- BeyelerStudios

---

谢谢，它起作用了，但是如果您查看我的数组，会发现每个数组集的最后一个元素都有$$hashKey:object:47。这些也都被填充到CSV文件中了。如何忽略该键/列标题($$hashKey)？ - BetaDev

你并没有发布你的原始数据，只有网站截图和解释器输出结果 - 我完全不知道你如何得到这个数组，只能猜测。你需要提供一个 [mcve]（重点在于完整）。 - BeyelerStudios

我已经过滤掉了它，现在完美了。再次感谢。 - BetaDev