web-dev-qa-db-ja.com

「失敗-ネットワークエラー」「download」属性を使用してHTML5でダウンロードを提供しようとすると

私がやろうとしていることの基本的な要約：

  • ユーザーからファイルを取得（「dropzone」ドラッグアンドドロップを使用してbootstrapモジュールを受信するためのモジュール））
  • ファイルを変更して「作業」を行う
  • 単一のファイルをダウンロードするためにファイルをまとめて圧縮する
  • ダウンロードのためにダウンロードをユーザーに送り返す（自動またはリンクで、詳細は下記）

上記の太字の行は機能していない行で、私は理解しようとしています。その作品に関連するHTMLとjavascriptは次のとおりです。

<button type="button" class="btn btn-primary" id="transform">
    <span class="glyphicon glyphicon-wrench"></span>
    Transform Uploaded Files
</button>
<a id="test_dl" href="" download="user_download.Zip">
    Download File
</a>
$('#transform').click(function (e) {

    $.getJSON('/transform', {}, function (final_Zip){
        var zipfile = "file://" + final_Zip.zip_filename

        $('a#test_dl').attr("href", zipfile)
    });
});

ユーザーは「Transform Uploaded Files」ボタンをクリックします。これにより、hrefが結果のzipfileの場所に更新され、「Download File」HTMLをクリックして結果のパッケージをダウンロードできます。

これをChromeでテストし、開発者コンソールを使用すると、hrefであることがわかります。ダウンロードボタンをクリックする前に適切に更新されていますが、常に「失敗-ネットワークエラー」ダイアログが表示されます。

回答を希望する質問

  • ここで何が間違っているように見えますか？
  • これはこれを行う正しい方法ですか？私がやろうとしているのは、プロセスが完了したときにファイルをユーザーに送り返すことです。とにかく「file：//」が正しくなく、サーバーが実際にそれを使用しているユーザーからリモートにいるときに失敗するのではないかと心配しています（現在開発中のローカルです）

編集：これのバックエンドが現在PythonのFlaskで実行されていることを追加する必要があります

javascriptjquerypythonhtmlflask
16
IceBox

どうやらこれはChrome data-URLが長すぎる問題です。私はまだ自分で作業していますが、明らかにBlobオブジェクトに関係するいくつかのソリューションがあります。

こちらをご覧ください： Fabric.jsでCanvasをPNGとしてダウンロードし、ネットワークエラーを返します

そしてここ： JavaScript配列情報をcsvにエクスポートする方法（クライアント側）？

19
Canis

JavaScript配列情報をcsvにエクスポートする方法（クライアント側で）？ に基づいて、この問題の解決策を実装しました。

Chrome-webのソリューションのみが必要だったので、これが私が使用したものです。完全なソリューションについては、元のanswの例を確認する必要があります。

$.ajax({
    url: "/getData",
    dataType: "text",
    success: function(data){            
        $("#download").attr({
            "value": "Download",
            "href": URL.createObjectURL(new Blob([data], {
                  type: "application/octet-stream"
            })),
            "download": "outputFile.csv"
        });
    }
});
12
Yanir Calisar