web-dev-qa-db-ja.com

IEファイルをダウンロード

次のコード行を使用して、Firefox、Chrome、OperaでのAjax呼び出しの応答でファイルをダウンロードできます。ただし、IE href属性downloadはサポートされていません。そのため、以下はIEでは機能しません。

HTML：

 <div class="fRight" style="margin-left:5px; margin-rigth:5px" >
    <input type="button" value="Request File"  id = "chReqFileBtn"  onclick = "handleClick"/>
    <a href="#" id="challengeReqFileAnchor" style="visibility: hidden"></a>
 </div>

JavaScript：

function handleClick()
{
    var code = $('#code').val();
    var quantity = $('#quantity').val();

    var req = $.ajax(
    {
        'type': 'POST',
        'url' : $apiBasePath+'config/challenge-file',
         contentType : 'application/json',
        'data': JSON.stringify({'code':code, 'quantity':quantity}),
        'success':function(response, status, xhr)
        {
            var code = xhr.getResponseHeader('Operation-Code');

            var anch = $('#challengeReqFileAnchor');
            anch.attr(
            {
                "download" : 'request.bin',
                "href" : "data:text/plain," + response       
            });
            anch.get(0).click();
        },
        'error': function(request,status,errorThrown) 
        {
           ......
        }
    });
    $pendingReqs.Push(req);  
}

IEでも同じ動作を実現するには、どのオプションが必要ですか？

javascriptjqueryhtmlinternet-explorer
11
steve

ダウンロード属性 は、IEおよびiOS Safariではサポートされていません

enter image description here

IE <10：

コマンド SaveAsexecCommand を使用すると、要素のコンテンツをダウンロード可能にすることでトリックを実行できます。

短所：

  • IE Win7で実行中の一部のバージョンでの問題[修正されたかどうかわかりません ここ]
  • データを含めるためにDOM要素が必要

IE> = 10

msSaveBlob を使用すると、このヘッダーを送信してBlobまたはFileを保存できるメソッドになります。

Content-Length: <blob.size>
Content-Type: <blob.type>
Content-Disposition: attachment;filename=<defaultName>
X-Download-Options: noopen

チェック BlobおよびmsSaveBlobを使用してローカルにファイルを保存する

短所：

  • Blobを定義する必要があります

他のブラウザ

すべてを自分で実装したくない場合は、生成されたファイルをクライアント側に保存するためのNiceライブラリ FileSaver.js があります。 Firefox、Chrome、Chrome Androidの場合、IE 10 +、OperaおよびSafari。IE<10の場合 saveTextAs を追加して、テキストファイル（.htm、.html、.txt）を保存するライブラリのフォーク

クロスブラウザソリューション

ファイル名、データ、ミームタイプを受信し、ヘッダー付きファイルを送信するサーバー側スクリプトContent-Disposition: attachment; filename=FILENAME

24
Issam Zoli

これはanch.get(0).click();に関連していると思います。すべてのブラウザでhiddenアンカー用に特別にサポートされているわけではないので、代わりに次のコードを試してください。

anch.get(0).show().focus().click().hide();
3
Dharmesh Patel

IEは、データURIやdownload属性への移動をサポートしていません。 _navigator.msSaveBlob_を使用して、IE 10+のファイルを保存できます。
_window.navigator.msSaveBlob_を確認し、IE固有のコードを書くことができます。
詳細については、次のリンクを確認してください。 BlobおよびmsSaveBlobを使用してローカルにファイルを保存する

3
Amjad Aziz

IE downloadタグをサポートしません 。

ただし、使用できるハックuglyがあります。

  • 非表示のiframeを作成します。

    <iframe id="dummy" style="display:none; visibility:hidden"></iframe>

  • Iframeのdocumentにデータを書き込みます：

    var ifd = document.getElementById('dummy').contentDocument;
ifd.open('text/plain', 'replace');
ifd.write('whatever you want to be in the file');
ifd.close();

  • execCommand を使用してファイルを保存します（実際には、[名前を付けて保存]ダイアログを表示するには）：

    ifd.execCommand('SaveAs', true, 'request.bin');

execCommandはIE11では機能しないことに注意してください。ブラウザを完全に正しく検出することはほぼ不可能であることを知っています。ただし、コードでファイルの保存に失敗した場合、これをバックアップルーチンとして試すことができます。

2
sampathsris

BOMとExcelの文字セットを使用したIE11からのダウンロードファイル用の私のJavaScriptバージョン：

$.post('/cup-frontend/requestthewholelist',
    {ipAddressList: validIpAddressListAsString},   // add custom http variables
    function (returnedData) {                      // success return
        var BOM = "\uFEFF";                        // byte order mark for Excel

        if (navigator.msSaveBlob) {                // ie block
            console.log("found msSaveBlob function - is't IE")
            var blobObject = new Blob([BOM + returnedData], {type: ' type: "text/csv; charset=utf-8"'});
            window.navigator.msSaveOrOpenBlob(blobObject, "cup_database.csv");
        }
        else {                                     // non-ie block
            console.log("not found msSaveBlob function - is't not IE")
            var a = window.document.createElement('a');
            a.setAttribute('href', 'data:text/plain; charset=utf-8,' + encodeURIComponent(BOM + returnedData));
            a.setAttribute('download', 'example.csv');
            a.click();
        }

    }).fail(function () {
    console.log('post error')
});
1
d0wn

最後に、何時間もの研究を行った後、私は本当に私のために働いたいくつかの答えを見つけました。次のアプローチは私のために働いた。

if (navigator.msSaveBlob) { // For IE
   return navigator.msSaveBlob(blobObj, fileName);
}

以下の行で

navigator.msSaveBlob(blobObj, fileName)

functionmsSaveBlobは、ファイルをディスクに保存します。パラメーターblobObjは、パラメーターfileNameに指定された名前で保存する必要があるオブジェクトです。

詳細については、次のリンクを参照してください。 MDN Webdocs Mozilla

0
iam.vikas