PHP-ブートストラップモーダルダイアログ、日付の選択、CSVのダウンロード-ブラウザにファイルを保存させることができません

スコットメイ

Bootstrapを使用してページを表示していますが、その一部はデータの抽出です。日付範囲ピッカー、閉じるボタン、ダウンロードボタンなど、モーダルダイアログを表示するダウンロードボタンを追加して、より広い範囲のデータをダウンロードできるようにしました。

モーダルコードの抜粋:

          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="DownloadModalLabel">Download Data </h3>
      </div>
      <div class="modal-body">
        <form id="download_form" action="api-dl.php" method="get">
          <div class="form-group">
            <label for="channel-name" class="control-label">Download Period:</label>
            <input type="text" name="daterange" value="<?php echo $DownloadDateStart . " - " . $DownloadDateEnd; ?>" />
          </div>
          <div class="form-group hidden">
            <input type="text" id="channel-id" name="channel-id" class="channel-id" value="ha" />
            <input type="text" name="site-id" class="site-id" value="<?php echo $SITE; ?>" />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="submitForm" class="btn btn-primary" data-dismiss="modal">Download CSV</button>
      </div>

さらに下に、送信ボタンに応答するスクリプトがあります。

    $(document).ready(function () {
      $("#download_form").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
          url: formURL,
          type: "GET",
          data: postData,
        });
      e.preventDefault();
      });
      $("#submitForm").on('click', function() {
        $("#download_form").submit();
      });
    });

データを抽出してCSVファイルで応答するためにphpファイルを「api-dl.php」と呼んでいることに気付くでしょう。ファイルが次のように見える最小限の偽の1行の応答にカットバックします。

header('Content-Disposition: attachment; filename="12345678.csv";');
header('Content-Type: "text/csv"');
header("Content-Length: 32");
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
//
echo '"15/10/2016", "12:00", "1.234\n"';

この時点で、php出力ストリームなどへのフラッシュと出力をたくさん試しました。常にブラウザの検査ペインに移動します。

リクエストヘッダー:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Cookie:PHPSESSID=.....
Host:r ....  .net.au
Referer:http://r ....  .net.au/site.php?region=Test&site=Test
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.90 Safari/537.36 Vivaldi/1.4.589.11
X-Requested-With:XMLHttpRequest

応答ヘッダー:

Cache-Control:no-cache, no-store, must-revalidate
Connection:Keep-Alive
Content-Disposition:attachment; filename="12345678.csv";
Content-Length:32
Content-Type:"text/csv"
Date:Sat, 24 Sep 2016 00:53:13 GMT
Expires:0
Keep-Alive:timeout=5, max=100
Pragma:no-cache
Server:Apache/2.4.18 (Ubuntu)

私の考えでは、このテーマで1,248のバリエーションを試しました。[応答]タブに、期待する応答が表示されます。

"15/10/2016", "12:00", "-1.234"

しかし、私の一生の間、ブラウザにそれをダウンロードさせることはできません。

見栄えの良いJavascriptを見たことがありますが、データはクライアント側では利用できず、サーバー上のデータベースにあります。

私は私が思う多くを逃すことはできません-あなたはそれが何であると思いますか?

センディル

これは正常に機能します。ダウンロードを強制すると、現在のページをダウンロードリンクにリダイレクトできます。参照:「AJAX」を使用してCSVファイルをダウンロードする

<script type="text/javascript">
$(document).ready(function () {
    $("#download_form").on("submit", function(e) {
        $('#wait-animation').show(); /* If required show animation */
        var postData = $(this).serializeArray();
        var site_id = $('.site-id').val();  
        var channel_id = $('.channel-id').val();            
        var daterange = $('.daterange').val();      
        document.location.href = $(this).attr("action")+"?site_id"+site_id+"&daterange="+daterange;
        /*e.preventDefault();*/
        $('#wait-animation').hide(); /* hide animation after download completes*/
  });
  $("#submitForm").on('click', function() {
    $("#download_form").submit();
  });
});
</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

TOP 一覧

  1. 1

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  2. 2

    Spring Boot Filter is not getting invoked if remove @component in fitler class

  3. 3

    Python / SciPyのピーク検出アルゴリズム

  4. 4

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  5. 5

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  6. 6

    androidsoongビルドシステムによるネイティブコードカバレッジ

  7. 7

    ZScalerと証明書の問題により、Dockerを使用できません

  8. 8

    VisualStudioコードの特異点/ドッカー画像でPythonインタープリターを使用するにはどうすればよいですか?

  9. 9

    ビュー用にサイズ変更した後の画像の高さと幅を取得する方法

  10. 10

    二次導関数を数値計算するときの大きな誤差

  11. 11

    Ansibleで複数行のシェルスクリプトを実行する方法

  12. 12

    画像変更コードを実行してもボタンの画像が変更されない

  13. 13

    Reactでclsxを使用する方法

  14. 14

    Three.js indexed BufferGeometry vs. InstancedBufferGeometry

  15. 15

    __init__。pyファイルの整理中に循環インポートエラーが発生しました

  16. 16

    PyTesseractを使用した背景色のため、スクリーンショットからテキストを読み取ることができません

  17. 17

    値間の一致を見つける最も簡単な方法は何ですか

  18. 18

    reCAPTCHA-エラーコード:ユーザーの応答を検証するときの「missing-input-response」、「missing-input-secret」(POSTの詳細がない)

  19. 19

    三項演算子良い練習の代わりとしてOptional.ofNullableを使用していますか?

  20. 20

    好き/愛の関係のためのデータベース設計

  21. 21

    エンティティIDを含む@RequestBody属性をSpringの対応するエンティティに変換します

ホットタグ

アーカイブ