Загрузите файл IE

Используя следующие строки кода, я могу загрузить файл в ответ на вызов Ajax в Firefox, Chrome, Opera. Однако в 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?

Ответы

Ответ 1

Атрибут загрузки НЕ поддерживается в IE и iOS Safari

enter image description here

IE & л; 10:

Команда SaveAs, использующая execCommand, может добиться цели, сделав содержимое элемента загружаемым.

Минусы:

  • Проблемы в некоторых версиях 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

Другие браузеры

Если вы не хотите реализовывать все это самостоятельно, есть хорошая библиотека FileSaver.js для сохранения сгенерированных файлов на стороне клиента. Он поддерживает Firefox, Chrome, Chrome для Android, IE 10+, Opera и Safari. Для IE & lt; 10 есть ветвь библиотеки, которая добавляет saveTextAs для сохранения текстовых файлов (.htm,.html,.txt)

Решение для кросс-браузеров

Сценарий на стороне сервера, который получает имя файла, данные, тип мема и затем отправляет файл с заголовком Content-Disposition: attachment; filename=FILENAME

Ответ 2

Я думаю, что это связано с anch.get(0).click();, не поддерживаемым всеми браузерами специально для привязок hidden, поэтому вместо этого вы можете попробовать следующий код,

anch.get(0).show().focus().click().hide();

Ответ 3

IE не поддерживает ни навигацию к URI данных, ни атрибут download. Вы можете использовать navigator.msSaveBlob для сохранения файла для IE 10+.
Вы можете проверить window.navigator.msSaveBlob и написать код, специфичный для IE, иначе использовать существующий код для сохранения файла.
Вы можете проверить следующую ссылку: Сохранение файлов локально с помощью Blob и msSaveBlob

Ответ 4

IE не поддерживает тег download.

Там есть уродливый взлом, который вы можете использовать.

  • Создайте невидимый 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. Я знаю, что почти невозможно обнаружить браузер совершенно правильно. Однако вы можете попробовать это как подпрограмму резервного копирования, если сбой файла в вашем коде.

Ответ 5

Моя версия JavaScript для загрузки файла из IE11 с спецификацией и набором символов для 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')
});

Ответ 6

Наконец, после нескольких часов исследований я нашел ответ, который действительно работал для меня. Следующий подход работал для меня.

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

В нижней строке

navigator.msSaveBlob(blobObj, fileName)

функция msSaveBlob сохраняет файл на диск. Параметр blobObj - это объект, который необходимо сохранить с заданным именем в параметре fileName

Для получения дополнительной информации, пожалуйста, посетите следующую ссылку: MDN Webdocs Mozilla