Вопрос по javascript, jquery, html, internet-explorer – IE скачать файл

9

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

На стороне сервера я установил определенные заголовки для принудительной установки donwload, но, поскольку это ajax, он не имеет никакого эффекта. Я делаю это в ajax, потому что мне также нужно выполнить дополнительный код в ответе. steve
Почему бы не позволить серверу справиться с этим? Какова цель вызова ajax? Prinzhorn
Мой скрипт загрузчика работает в IE10 +:danml.com/js/download.js он использует msSaveBlob для IE10 compat ... dandavis
Но если вы абсолютно хотите это в браузере:github.com/ChenWenBrian/FileSaver.js#examples Prinzhorn

Ваш Ответ

5   ответов
1

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

20

Скачать атрибут НЕ поддерживается в IE и iOS Safari

IE <10:

командаСохранить как с помощью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 <10 есть форк библиотеки, которая добавляетsaveTextAs сохранить текстовые файлы (.htm, .html, .txt)

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

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

Спасибо, что поделились модулем npm - сэкономили мне часы :) Matt Goo
2

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

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

Создать невидимкуiframe:

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

Запишите свои данные в iframedocument:

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

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

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

Моя версия 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')
});

Похожие вопросы