web-dev-qa-db-fra.com

IE télécharger un fichier

En utilisant les lignes de code suivantes, je peux télécharger un fichier dans la réponse d’un appel Ajax dans Firefox, Chrome, Opera. Cependant, dans IE l'attribut hrefdownload n'est pas pris en charge. Par conséquent, le ci-dessous ne fonctionne pas dans 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);  
}

Quelles options aurais-je pour accomplir le même comportement dans IE également?

javascriptjqueryhtmlinternet-explorer
9
steve

L'attribut de téléchargement n'est PAS pris en charge dans IE et iOS Safari

 enter image description here

IE <10:

Commande SaveAs using execCommand peut faire l'affaire en rendant le contenu de l'élément téléchargeable.

Les inconvénients:

  • Problèmes rencontrés dans certaines versions de IE sous Win7 [Je ne sais pas s'il est corrigé Ici]
  • Besoin d'un élément DOM pour contenir des données

IE> = 10

En utilisant msSaveBlob , c’est une méthode qui permet d’enregistrer Blob ou File en envoyant les en-têtes suivants:

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

Vérifier Sauvegarder des fichiers localement en utilisant Blob et msSaveBlob

Les inconvénients:

  • Besoin de définir un blob

D'autres navigateurs

Si vous ne voulez pas implémenter tout cela par vous-même, il existe une belle bibliothèque FileSaver.js pour sauvegarder les fichiers générés côté client. Il prend en charge Firefox, Chrome, Chrome pour Android, IE 10+, Opera et Safari. Pour IE <10, il existe un fork de la bibliothèque qui ajoute saveTextAs pour enregistrer les fichiers texte (.htm, .html, .txt)

Solution de navigation croisée

Un script côté serveur qui reçoit le nom de fichier, les données, le type de meme, puis envoie le fichier avec l'en-tête Content-Disposition: attachment; filename=FILENAME

19
Issam Zoli

Je pense que cela est lié au anch.get(0).click(); qui n'est pas pris en charge par tous les navigateurs, spécialement pour les ancres hidden. Vous pouvez donc essayer de suivre le code à la place,

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

IE ne prend pas en charge la balise download .

Cependant, vous pouvez utiliser un hack de moche.

  • Créer une iframe invisible:

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

  • Ecrivez vos données dans la variable document de l'iframe:

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

  • Utilisez execCommand pour enregistrer le fichier (en fait, demander la boîte de dialogue Enregistrer sous):

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

Notez que execCommand ne fonctionne pas dans IE11. Je sais qu'il est presque impossible de détecter le navigateur parfaitement correctement. Cependant, vous pouvez essayer ceci en tant que routine de sauvegarde si l'enregistrement du fichier échoue dans votre code.

2
sampathsris

IE ne prend pas en charge la navigation vers un URI de données ni l'attribut download . Vous pouvez utiliser navigator.msSaveBlob pour enregistrer le fichier pour IE 10+.
Vous pouvez vérifier window.navigator.msSaveBlobet écrire un code spécifique IE, sinon utilisez le code existant pour enregistrer le fichier.
Vous pouvez vérifier le lien suivant pour plus de détails: Sauvegarder des fichiers localement en utilisant Blob et msSaveBlob

1
Amjad Aziz

Ma version javascript pour le fichier à télécharger à partir d'IE11 avec nomenclature et jeu de caractères pour Excel:

$.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')
});
0
d0wn