Файл загружен с AJAX не открывается

Question

У меня проблема с загрузкой файла с запросом Ajax, файл загружается успешно, но не открывается. Я не знаю, что мне не хватает. Мы ценим вашу помощь с подробностями, приведенными ниже.

Спасибо.

У меня есть страница JSP со списком вложений, каждое из которых содержит Загрузить кнопка.

При нажатии на Download вызывается функция с именем downloadFile (url)

The code on download button

')" class="btn btn-sm btn-round btn-default">  

Функция downloadFile , которая выполняется при нажатии загрузки кнопки

function downloadFile( url )
    {
        $.ajax({
            type: "GET",
            url: url,
            headers: {
                'Content-Type': 'application/octet-stream'
            },
            success: function(response, status, xhr) {
                // check for a filename
                var filename = "";
                var disposition = xhr.getResponseHeader('Content-Disposition');
                if (disposition && disposition.indexOf('attachment') !== -1) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                }
        
                var type = xhr.getResponseHeader('Content-Type');
                var blob = new Blob([response], { type: type });
        
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);
        
                    if (filename) {
                        // use HTML5 a[download] attribute to specify filename
                        var a = document.createElement("a");
                        // safari doesn't support this yet
                        if (typeof a.download === 'undefined') 
                        {
                            window.location.href = downloadUrl;
                        } else 
                        {
                            a.href = downloadUrl;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                        }
                    } else {
                        window.location.href = downloadUrl;
                    }
        
                    setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                }
            }, error: function(error) {
                alert('<bean:message key="attachment.not.found" />');   
            }
        });
        
    }

При нажатии на кнопку скачать он успешно загружает файлы, которые не могут быть открыты, как показано на скриншоте.

The issue is that the file downloaded is not being opened, and the error is something like we don't support the format

введите описание изображения здесь

Ценю вашу помощь!

Answer 1

Я использовал приведенную ниже функцию из api (http://danml.com/js/download2.js), и она отлично сработала для меня.

function downloadFile( url )
    {
        var flag = 1;
        fetch(url, {
            method: "GET",
            headers: {
                    "Content-Type": "application/json; charset=utf-8"
                }
            })
            .then(response => {
                if (response.status === 200) {
                    filename = response.headers.get("content-disposition").split(";")[1].split('"')[1];
                    return response.blob();
                } else {
                    alert('Attachment not found!');
                    flag = 0;
                    return;
                }
            })
            .then(body => {
                if(flag > 0 ) {
                    download(body, filename, "application/octet-stream");
                }
            });
    
    }