jQueryでのCSVダウンロード

ボタンを選択したらCSVとしてダウンロードしたいと思っていますがうまくいきません。
値としては問題ないと思っているのですが、ダウンロードしたファイルの中身がCSV形式にならない状態です。
どこがおかしいのかご指摘いただけないでしょうか？

HTML
1<html>
2<head>
3<title></title>
4<meta charset="utf-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6</head>
7<body>
8
9<form>
10<table>
11	<tr>
12		<td>A</td><td>B</td><td>C</td><td>D</td><td><input type="checkbox" name="11" value="りんご,1,200"></td>
13	</tr>
14	<tr>
15		<td>a</td><td>b</td><td>c</td><td>d</td><td><input type="checkbox" name="11" value="メロン,2,4000"></td>
16	</tr>
17	<tr>
18		<td>1</td><td>2</td><td>3</td><td>4</td><td><input type="checkbox" name="11" value="バナナ,4,500"></td>
19	</tr>
20</table>
21</form>
22
23<p class="btn">CSV Expoert</p>
24<a style="display:none;" id="downloader" href="#"></a>
25
26<script>
27$(function(){
28$('.btn').on('click',function(){
29
30var text = '';
31/* 値取得 */
32$("[name=11]:checked").each(function() {
33	text = text + $(this).val() + ',';
34});
35
36    /* 配列 */
37    var array_data = [text];
38	/* 下記の配列ならうまくいく */
39    // var array_data = [['りんご',1,200],['メロン',2,4000],['バナナ',4,500]];
40
41    /* BOM用意 */
42    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
43
44    /* CSV用意 */
45    var csv_data = array_data.map(function(l){return l.join(',')}).join('\r\n');
46
47    var blob = new Blob([bom, csv_data], { type: 'text/csv' });
48
49    var url = (window.URL || window.webkitURL).createObjectURL(blob);
50
51    var a = document.getElementById('downloader');
52    a.download = 'data.csv';
53    a.href = url;
54
55    /* ダウンロードクリック*/
56    $('#downloader')[0].click();
57    
58  });
59});
60
61</script>
62
63</body>
64</html>

行動規範の内容に同意します

回答1件

ベストアンサー

以下の部分

JavaScript
1    /* 配列 */
2    var array_data = [text];
3    /* 下記の配列ならうまくいく */
4    // var array_data = [['りんご',1,200],['メロン',2,4000],['バナナ',4,500]];

ここでconsle.logしてみれば分かるように、textがりんご,1,200,メロン,2,4000,バナナ,4,500,(文字列)、array_dataが["りんご,1,200,メロン,2,4000,バナナ,4,500,"](当然要素が文字列一つだけの配列)になってます。
うまくいっている配列と形式が違うことが確認できると思います。
以降の処理をそのまま活かすならば、うまくいっている配列と同じ形式になるようにしてください。

投稿2019/12/03 16:58