base64でエンコードされたExcelファイルをブラウザでダウンロードできるようにしたい

前提・実現したいこと

APIからbase64でエンコードされたデータが返ってきます。
ブラウザ上にあるリンクを押すとExcelファイルがダウンロードされるようにしたいです。

発生している問題

.xlsxでダウンロードはできるのですが、そのファイルを開くとExcelになっておらず、中身は以下のような文字列が入っています。

##0#########"¥"#,##0;[Red]"¥"\-#,##0#########"¥"#,##0.00;"¥"\-#,##0.00#########"¥"#,##0.00;[Red]"¥

ソースコード

HTML
1<a id="download" download="result.xlsx" onclick="test_download()">ダウンロード</a>
2

javascript
1
2function test_download()
3{
4  $.ajax({
5    url  : URL,
6    type : "POST",
7    dataType: 'json',
8    data: {"test": "test"},
9  })
10  .then(
11    function (data,textStatus,jqXHR) {
12    var data2 = JSON.stringify(data);
13    var data3 = JSON.parse(data2);
14    var data4 = data3["data"];
15    test(data4);
16
17    },
18    function () {
19    alert("fail");
20    });
21}
22
23function test(bs64) {
24  var content = bs64;
25  var mimeType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
26  var name = 'result.xlsx';
27
28  var result = window.atob(bs64.replace(/^.*,/, ''));
29  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
30  var blob = new Blob([ bom, result ], { type : mimeType });
31
32  var a = document.getElementById('download');
33  a.href = window.URL.createObjectURL(blob);
34}
35
36

補足情報（FW/ツールのバージョンなど）

IE11(safariのユーザーエージェントで選択)
macOS High Sierra
LibraOffice

コードをミスっていて二回リンクを押さないとダウンロードされませんが、今知りたいのはExcelファイルの生成についてなのでスルーしていただけると幸いです。
不慣れで申し訳ありません。よろしくお願いいたします。

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

回答1件

はじめて回答します。
また、久しぶりにプログラミングをしているので、私の誤認等がありましたらすいません。

前提のAPIから取得できる情報に不明点が多いので、私の方法が適切かは、わかりませんが、質問文を参考にスクリプトを作ってみました。

おそらくなのですが、前提のAPIからの情報がXLSX形式であれば、ヘッダーを調整するだけで、XLSX形式のデータがダウンロードできる気がしますが、そうでない場合、何らかのアプリケーションを利用する必要があると思いました。

APIからXLSX形式のデータが飛んでくるのだけれども、文字化けする場合は、私の回答は、あてはまらないと思います。

私としては、色々、調べた結果、「SheetJS」というものを利用してみました。

https://sheetjs.com/
https://github.com/sheetjs/js-xlsx

他のサイトのサンプルを鵜呑みにしている様なところもあり、書いているプログラム全体が完全に把握できているわけでもないのですが、たたき台のスクリプトとしては役に立つと思って回答しています。

私は、Windows10 Excel2013 IE11 で検証しました。

何らかのご参考になりましたら幸いです。

[q1.php]

html
1<!DOCTYPE html>
2<html>
3<head>
4    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
5    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.10/xlsx.full.min.js"></script>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
7    <title></title>
8    <script type="text/javascript">
9        function test_download()
10        {
11          $.ajax({
12            url  : 'q1_1.php',//URL,
13            type : "POST",
14            dataType: 'json',
15            data: {"test": "test"},
16          })
17          .then(
18            function (data,textStatus,jqXHR) {
19            var data2 = JSON.stringify(data);
20            var data3 = JSON.parse(data2);
21            var data4 = data3["data"];
22            test(data4);
23
24            },
25            function () {
26            alert("fail");
27            });
28        }
29
30        function test(bs64) {
31
32            // UTF8の文字をBASE64するには、URIエンコーディングをした方が良いようだ
33            // URIエンコーディングしている場合は、BASE64をでコードした後に、URIでデコードする
34            var content = unescape(decodeURIComponent(window.atob(bs64)));
35
36            // セパレーター（区切り文字）
37            var s = ',';
38            // 改行コード
39            var b = '\r\n';
40
41            var tempContent = content.split(b);
42            var inputContent = [];
43
44            var i = 0;
45
46            tempContent.forEach(function(element) {
47                inputContent[i] = element.split(s);
48                i++;
49            });
50
51            var fileName = 'result.xlsx';
52            var sheetName = 'result1';
53
54            var wopts = {
55              bookType: 'xlsx',
56              bookSST: false,
57              type: 'binary'
58            };
59
60            var workBook = {SheetNames: [], Sheets: {}};
61            workBook.SheetNames.push(sheetName);
62
63            workBook.Sheets[sheetName] = XLSX.utils.aoa_to_sheet(inputContent);
64
65            var wbout = XLSX.write(workBook, wopts);
66
67            function s2ab(s) {
68              var buf = new ArrayBuffer(s.length);
69              var view = new Uint8Array(buf);
70              for (var i = 0; i != s.length; ++i) {
71                view[i] = s.charCodeAt(i) & 0xFF;
72              }
73              return buf;
74            }
75
76            saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), fileName);
77
78        }
79    </script>
80</head>
81<body>
82<a id="download" download="result.xlsx" onclick="test_download()">ダウンロード</a>
83</body>
84</html>
85
86

（APIを疑似したスクリプトです）
[q1_1.php]

php
1<?php
2
3   //UTF8の文字列をBASE64でエンコードするには、事前にURIエンコードが必要なよう
4   echo json_encode(array('data' => base64_encode(urlencode("test1,テスト2,試験3\r\n本番1,本番２３"))));