【javascript】【sheet.js】配列が書き込まれない。複数のシートに出力する方法

やりたいこと

初心者です。お手柔らかにお願いします。

任意の2次元配列array1,array2をエクセル出力する時にarray1をsheet1へ、array2をsheet2へ書き出力したいです。bookは１つです。

現在はExcelファイルをダウンロードすることは出来ました。が問題が起きました

こちらを参考にしました
Excel出力の大元
(https://qiita.com/tomgoodsun/items/0107e5d778b803935fc0)

問題

array1の内容が書き込まれませんでした。白紙の状態です。
array1の内容が書き込まれるようにしたいです！
↑よろしくお願いいたします

シート番号は'sheet'+1の数字を変えることで名前が変わることを確認済みです

試したこと

= array1　のところを'123'としてためすとエラーがでました。このエラーは自分で解析できませんでした。
実際配列形式で代入すると思うので、このエラーは無視できるのかなと思います。

考えていること

workbook.Sheets[n] = array1;で代入するarrayに何か特別な処理が必要なのでしょうか？
参考にしたリンク先ではworkbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);
のように書いています。ほかのサイトでもXLSX.utils.というのが使われており、arrayの形式(?)が問題なのでしょうか。。。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample1</title>
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.full.min.js"></script>
7  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
8</head>
9<body>
10  <input type="button" id="xlsx" value="Excel出力" onclick="func1()">
11  <script language="javascript" type="text/javascript">
12
13    var array1 =
14      [
15        ["apple", "banana", "cherry"],
16        [1, 2, 3]
17      ];
18
19
20    function func1() {
21    	var wopts = {
22    	bookType: 'xlsx',
23    	bookSST: false,
24    	type: 'binary'
25		};
26
27  		var workbook = {SheetNames: [], Sheets: {}};
28  		
29  		var n = 'Sheet' + 1;
30  		workbook.SheetNames.push(n);
31  		workbook.Sheets[n] = array1;
32  		
33  		var wbout = XLSX.write(workbook, wopts);
34  		
35  		
36  		function s2ab(s) {
37    		var buf = new ArrayBuffer(s.length);
38    		var view = new Uint8Array(buf);
39	    		for (var i = 0; i != s.length; ++i) {
40	      			view[i] = s.charCodeAt(i) & 0xFF;
41	    		}
42    			return buf;
43  			}
44
45  saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'test.xlsx');
46}
47  </script>
48</body>
49</html>

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'length' of undefined
    at yu (xlsx.full.min.js:18)
    at kp (xlsx.full.min.js:19)
    at lg (xlsx.full.min.js:22)
    at Eg (xlsx.full.min.js:23)
    at Object.Bg [as write] (xlsx.full.min.js:23)
    at func1 (index.html:33)
    at HTMLInputElement.onclick (index.html:10)

回答1件

ベストアンサー

参考にされているページのコードでは、表データをHTMLTableElementで渡しているので、配列をHTMLTableElemntに変換する必要がありそうですね。

以下のcurrentValueは配列でなく、HTMLオブジェクトっぽいので。

JavaScript
1document.querySelectorAll('table.table-to-export').forEach(function (currentValue, index) {
2    // sheet_to_workbook()の実装を参考に記述
3    var n = currentValue.getAttribute('data-sheet-name');
4    if (!n) {
5      n = 'Sheet' + index;
6    }
7    workbook.SheetNames.push(n);
8    workbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);
9  });

追記

2次元配列をHTMLTableElementに変換して、XLSXに出力できることを確認しておきました。
以下、コード。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample1</title>
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.full.min.js"></script>
7  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
8</head>
9<body>
10    <input type="button" id="xlsx" value="Excel出力" onclick="func1()">
11    <script language="javascript" type="text/javascript">
12        var array1 = [ ["apple", "banana", "cherry"], [1, 2, 3] ];
13
14        function func1() {
15            var wopts = {
16            bookType: 'xlsx',
17            bookSST: false,
18            type: 'binary'
19            };
20
21            var workbook = {SheetNames: [], Sheets: {}};
22
23            var n = 'Sheet' + 1;
24            workbook.SheetNames.push(n);
25            // workbook.Sheets[n] = array1;
26            workbook.Sheets[n] = XLSX.utils.table_to_sheet(ARRAY_TO_OBJ(array1), wopts); //配列をTableElementに変換してセット
27
28            var wbout = XLSX.write(workbook, wopts);
29
30            saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'test.xlsx');
31        }
32
33        function s2ab(s) {
34            var buf = new ArrayBuffer(s.length);
35            var view = new Uint8Array(buf);
36            for (var i = 0; i != s.length; ++i) {
37                view[i] = s.charCodeAt(i) & 0xFF;
38            }
39            return buf;
40        }
41
42        //2次元配列をテーブルエレメントに変換して返す
43        function ARRAY_TO_OBJ(array){
44            // 要素の取得
45            var element = document.createElement("table"); //table生成
46            array.forEach(function (arr) {
47                var row = element.insertRow( -1 ) ; //行追加
48                arr.forEach(function (value) {
49                    var cell = row.insertCell() ; //セル追加
50                    cell.textContent = value ; //セル1に値セット
51                });
52            });
53            return element
54        }
55    </script>
56</body>
57</html>
58