Ошибка Chrome при загрузке файла через iframe

Question

Я отправляю данные JSON на сервер. Сервер генерирует файл PDF и отвечает URL-адресом этого файла PDF. Затем я делаю еще один запрос на сервер для загрузки файла PDF. Чтобы сделать загрузку, я создаю скрытый iframe и устанавливаю исходный URL-адрес PDF. Обратите внимание, что я хочу, чтобы браузер пользователя оставался на той же странице и загружался в фоновом режиме. Более подробную информацию о том, что я делаю, и о решении, с которым я столкнулся, можно найти в этом ТАКОМ вопросе .

Всякий раз, когда я использую эту технику в Chrome, все работает отлично. Но, глядя на консоль разработчика Chrome, я вижу сообщение об ошибке Failed to load resource. Есть ли способ сделать это по-другому, чтобы я не получил эти ошибки?

Очень простой и работающий пример проблемы в действии можно увидеть на jsfiddle. Просто нажмите кнопку «Загрузить PDF» и посмотрите на консоль Chrome.

Код на этой странице выглядит так:

$(document).ready( function() {
    var downloadFile = function(url){
        var iframe = $("iframe#download");
        if (!iframe.length) {
            iframe = $("<iframe id='download' style='display:none;'/>");
            $("body").append(iframe);
        }
        iframe.attr("src", url);
    };

    $("button").click(function() {    
        downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
    });
});

Answer 1

Другие респонденты предложили изменить заголовок типа контента, который также должен работать, но есть специальный заголовок ответа для указания браузеру, как обрабатывать файл.

Следующее должно заставить PDF-файл загружаться, а не отображаться в браузере:

"Расположение содержимого: вложение; имя файла = [имя вашего файла]"

Answer 2

Chrome имеет встроенный просмотрщик PDF. Когда вы устанавливаете src для iframe, Chrome просто пытается отобразить файл PDF. Поскольку он установлен на display:none, загрузка отменяется, и вы получаете это сообщение.

Попробуйте установить для display значение, отличное от none, и расположите iframe вне экрана с помощью position:absolute.

Answer 3

Это просто не в моей голове - я думаю, что сталкивался с той же проблемой раньше.Когда iframe впервые добавляется в dom, у него нет src - что делает Chrome "FAIL TO LOAD RESOURCE".

Попробуйте добавить начальный src в iframe -

 iframe = $("<iframe id='download' src='about:blank' style='display:none;'/>");

Это должно сделать это, я верю.(Вы можете опровергнуть меня миллион раз, если это неправильно :))

Answer 4

var downloadFile = function(url){
    var iframe = $("iframe#download");
    if (!iframe.length) {
        iframe = $("<iframe id='download' style='display:none;'/>");
        $("body").append(iframe);
    }
    iframe.attr("src", url);
    iframe.on('load',function(){
          console.log("error")
    });
};

U просто попробуйте это, это работает, но это не правильный способ решить эту проблему ...

Answer 5

Я изменил src файла на свой собственный веб-сервер и установил «content-type» заголовка ответа «application / octet-stream» вместо «application / pdf», и он корректно загрузился в Хром. Я должен указать, что ошибка все еще обнаруживалась в консоли («Ошибка загрузки ресурса»), но это все равно побудило меня загрузить файл.

Answer 6

переместить вашу функцию за пределы документа. Уже ...

общие функции должны быть всегда снаружи ... и должны вызываться везде, где это необходимо

$(document).ready( function() {    

    $("button").click(function() {    
        downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
    });
});

    var downloadFile = function(url){
            var iframe = $("iframe#download");
            if (!iframe.length) {
                iframe = $("<iframe id='download' style='display:none;'/>");
                $("body").append(iframe);
            }
            iframe.attr("src", url);
        };