FILE APIでCSVファイルを書き出したいですが、反応がありません。

Question

こんにちは、いつもお世話になっております。

CSVのインポートとエクスポート機能を作っています。
FILE APIを使ってローカルからファイル中身を読み取ってDBに入れるインポートと、DBにあるデータをCSVファイルに吐き出すエクスポートを実装しようとしてます。インポートはなんとか作り、今はエクスポートの方を使っています。

やりたいのは、Cakehphp3のコントローラーからDBの情報を配列で作り、Ajaxで渡してFILE APIを用いてローカルにダウンロードさせることです。

https://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813

このリンク先のサンプル2番目の感じです。サンプルのテストは上手く行きましたので、以下のように書いてみましたが、ファイルが生成されず、そのまま最後まで走ってしまいます。
デバッグしてみたら、blobオブジェクトが怪しいかな、と思います。ファイル名やJSON,配列のデータは思い通りに取れていますが、なぜかmsSaveBlob, msSaveOrOpenBlob, else(chrome等用)までひっかからずパースしてしまいます。
どこがおかしいのか、怪しいところや何かヒントがありましたら教えてください。
ソースコードとDebugした画面を添付します。宜しくお願い致します。

コントローラー側では、DBからデータを出してそれをSerializeするだけです。

 public function export()
    {
        if($this->request->is('ajax'))
        {
            $customer_idx = $this->Auth->user('customer_idx');
            $sections = $this->Section->find()->where(['customer_idx' => $customer_idx])
                                            ->select(['section_idx','year','customer_idx','section_code','section_name','section_short','memo','is_used','deleter','deleted'])
                                            ->epilog('FOR UPDATE')
                                            ->toArray();
            if(!empty($sections))
            {                          
                // success
                $results = $sections;
                $this->Flash->success(__('データベースからエクスポートに成功しました。'));
            }
            else
            {
                //failed                
                $results = null;
                throw new exception($e);
                $this->log($e);
                $this->Flash->error(__('エクスポート失敗[DBデータエラー](E30005)'));
            }
            $this->set('result', $results);
            $this->set('_serialize', ['result']);                             
        }   
    }

クライアントの方は、ファイル名を入力してもらい、そのファイル名でCSVファイルを生成したいです。<a>タグのdownload
プロパティ使うということでしたので、CSV出力ボタンを押すと、ファイル名を.arrで追加する形にしました。

<div class="form-group">
　　<div class="col-lg-12">
    　　 <?= $this->Form->control('filename', ['class' => 'form-control','label' => 'CSVファイル名', 'type' => 'text', 'required' => 'required', 'id'=>'filename']); ?>
　　</div>
</div>
              
      <div class="form-group" align="center">
          <?= $this->Html->link(
                  '戻る', $referer,
                   ['class' => 'btn btn-success btn-sm', 'type' => 'button']
          ); ?>

      <a id="download" href="#"><button type="button" class="btn btn-primary btn-sm">CSV出力</button></a>

スクリプトの方はこんな感じです。

<script type='text/javascript'>

    $('#download').on('click', function(e){  
        
        // ファイル名をAタグのDownload属性で追加
        e.preventDefault();  
        var filename = $('#filename').val() + ".csv"; 
        $('#download').attr('download',filename);     

        if(window.File && window.FileReader && window.FileList && window.Blob) 
        {        
            if($('#filename').val()=='')
            {
                alert('CSVファイル名は必ず入力してください。');
                return false;
            }

            if(!confirm('CSVファイルにマスタ情報の出力を行います。本当によろしいですか？'))
            {
                alert('CSVファイル出力をキャンセルしました。');
                return false;
            }
            else
            {
              $.getJSON('../section/export',
                    null,
                    function(data,status){                  
                        // phpから連想配列をとってくる
                        if(status)
                        {   
                            var contents = [];
                            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);   // UTF-8のBOMコード

                            for(var key in data.result)
                            {
                                contents[key] = [];    //配列の要素数を指定する                                
                                contents[key] = Object.values(data.result[key]); //　連想配列を配列にする。                               
                            }

                            'use strict';
                            var csvContents = CSV.stringify(contents);　//　CSV化する。

                            // データをファイルとして作る
                            var blob = new Blob([bom,csvContents], { type : 'text/csv;charset=utf-8;' });  
                                                                                    
                            if (window.navigator.msSaveBlob) { 
                                window.navigator.msSaveBlob(blob, filename); 
                                window.navigator.msSaveOrOpenBlob(blob, filename);                                 
                            } 
                            else 
                            {
                                $('#download').attr('href',(window.URL || window.webkitURL).createObjectURL(blob, {type: "application/octet-stream"}));                                 
                            }                            
       　                }
                        else
                        {
                            alert('DBエラー');        
                            return false;        
                        }
                    })

Comments

[defghi1977]

コードをスクリーンショットで貼り付けるのは可読性の面からおすすめできません. コピペでいいのでコードそのものを掲載して下さい.

[defghi1977]

「text/csv;charset=utf-8;」の末尾の;が要らない気がする.「text/csv;charset=utf-8」だと思う

[lovelydai]

回答ありがとうございます。コードは下の方にあります、スクリーンショットはデバッグの結果を見ていただくために添付したものです。

[defghi1977]

「text/csv;charset=utf-8;」のところを「text/plain」に変えたら動きませんか？csvはブラウザで直接取り扱う形式ではないので気になります.

Answer 1

解決しました。
原因は、やはりイベントの着火タイミングでした。
aリンクのボタンを押してイベントを作り、サーバーからオブジェクトを受け取ってきた時には、もうイベントが終わってしまったのでファイルダウンロードイベントが上手く動かなかったというか、着火されなかったようです。

解決策は、まずaタグのDownloadのコピーをhiddenタイプで作り、hrefのcreatedObjectURLを作った後にclick()イベントを明記しておくことでした。
これでファイルはダウンロードされるようになりました。

また、もう一つの問題があり、それは中身に入れる内容のフォーマットでした。
ということで、何とか解決できましたので、そのソースコードを共有致します。

<！--他の部分は省略です、リンクタグでイベントを作るところです。-->
<a id="download" href="#"><button type="button" class="btn btn-primary btn-sm">CSV出力</button></a>
<a id="download_hidden" href="#"></a>

 $.getJSON(urlPath,
        null,
        function(data,status)
        {                  
                if(status)
                {   
                        var filename = $('#filename').val() + ".csv";
                        $('#download_hidden').attr('download',filename);
                        
                        var contents = [];
                        var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);   // UTF-8のBOMコード

                        for(var key in data.result)
                        {
                            contents[key] = [];    //配列の要素数を指定する
                            // オブジェクト値を文字列に変換する。
                            
                            var temp_var = JSON.stringify(Object.values(data.result[key]),
                            // Nullがある場合は、””に変える。                            
                                function(key, value) 
                                {
                                    if (value === null || value =='')
                                    {
                                        return '""';
                                    }
                                return value;
                                }        
                            );                                
                            //　文字列配列をJSONとして加工する。
                            contents[key] = JSON.parse(temp_var);                                
                        }

                        // File APIのBlobのパラメータに投げるために形を整形する。
                        var csvContents = contents.map(function(l){return l.join(',')}).join('\r\n');
                        console.log("cvsContents = ",csvContents);   

                        // データをファイルとして作る                            
                        var blob = new Blob([bom,csvContents], { type : 'text/csv' });     
                        
                        if (window.navigator.msSaveBlob) 
                        { 
                            window.navigator.msSaveBlob(blob, filename); 
                            // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
                            window.navigator.msSaveOrOpenBlob(blob, filename);
                        }
                        else
                        {
                            var linkObj = document.getElementById("download_hidden");
                            linkObj.href =  window.URL.createObjectURL(blob);
                            linkObj.click();
                        }
                }
         window.URL.revokeObjectURL(blob);
 })

Answer 2

すみません誤って回答しました・・・。