Завантажте файл за допомогою Javascript / jQuery


357

У мене є дуже подібна вимога зазначено тут .

Мені потрібно, щоб браузер користувача розпочав завантаження вручну, коли $('a#someID').click();

Але я не можу використовувати window.hrefметод, оскільки він замінює поточний вміст сторінки файлом, який ви намагаєтеся завантажити.

Натомість я хочу відкрити завантаження в новому вікні / вкладці. Як це можливо?


Я спробував багато відповідей у ​​споріднених питаннях, і це остаточна відповідь .
Баш

Налаштування window.location.href працює для мене. Також вміст вікон НЕ змінюється. Я припускаю, що ви використовували неправильний contentType?
BluE

Відповіді:


379

Використовуйте невидимий <iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

Щоб змусити браузер завантажувати файл, який він інакше міг би бути рендерированним (наприклад, HTML або текстові файли), вам потрібен сервер, щоб встановити тип файлу MIME на безглузде значення, наприклад, application/x-please-download-meабо альтернативно application/octet-stream, яке використовується для довільної двійкової дані.

Якщо ви хочете відкрити його лише на новій вкладці, єдиний спосіб зробити це - користувач натиснути на посилання з targetатрибутом, встановленим на _blank.

У jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Щоразу, коли це посилання буде натиснуто, воно завантажить файл на новій вкладці / вікні.


4
Веб-сторінка не може автоматично відкрити нову вкладку. Щоб змусити браузер завантажувати, змусіть сервер надіслати файл pdf з нісенітницею MIME-типу, наприклад, application / x-please-download-me
Randy the Dev

14
Чудово зроблено! Вирішує проблему добре. Однак ви можете скористатися: iframe.style.display = 'none'; оскільки це повністю приховає кадр iframe. Ваша поточна реалізація зробить кадр невидимим, але кадр iframe все ще займе місце внизу сторінки, що спричинить зайвий пробіл.
Акрикос

2
Це "напів" працює для мене. Я створив наступний простий тестовий html: <html> <body> <iframe src = "fileurl"> </iframe> </body> </html>, і він завантажується, але в хромованій консолі я бачу, що завантаження було "скасовано" і відображається червоним кольором. Це частина більшого мобільного веб-додатка, і той факт, що його скасовують, розбиває додаток, оскільки він спричиняє загальну веб-помилку. Як-небудь навколо цього?
Сагі Манн

27
Хороший фрагмент. Однак встановлення типу безглуздих речей трохи заважає. Щоб попросити браузер завантажити файл, який він може візуалізувати, скористайтеся таким заголовком: Content-Disposition: attachment; filename="downloaded.pdf"(ви, звичайно, можете налаштувати ім'я файлу, як вам потрібно).
rixo

2
Як змусити завантаження без сервера? Тож просто html-сторінка з деяким JavaScript.
Родріго Руїз

221

Оновлення сучасних браузерів на 2019 рік

Я зараз рекомендую такий підхід із кількома застереженнями:

  • Потрібен відносно сучасний браузер
  • Якщо очікується, що файл буде дуже великим, ви, швидше за все, зробите щось подібне до оригінального підходу (iframe та cookie), оскільки деякі з наведених нижче операцій можуть зайняти системну пам'ять як мінімум настільки ж велику, як файл, що завантажується та / або інший цікавий процесор побічні ефекти.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

Оригінальний підхід на основі jQuery / iframe / cookie 2012 року

Я створив плагін для завантаження файлів jQuery ( Demo ) ( GitHub ), який також може допомогти у вашій ситуації. Він працює аналогічно з iframe, але має деякі цікаві функції, які я вважаю досить зручними:

  • Дуже просто налаштувати приємні візуальні засоби (діалоговий інтерфейс jQuery, але не потрібно)

  • Користувач ніколи не залишає ту саму сторінку, з якої ініціював завантаження файлу. Ця функція стає визначальною для сучасних веб-додатків

  • Функції successCallback та failCallback дозволяють вам чітко ознайомитись із тим, що бачить користувач в будь-якій ситуації

  • У поєднанні з інтерфейсом jQuery, розробник може легко показати модальний спосіб, який повідомляє користувачеві про те, що відбувається завантаження файлів, розірвати модальний модуль після початку завантаження або навіть дружньо повідомити користувача про те, що сталася помилка. Дивіться демонстраційний приклад для цього. Сподіваюся, це допоможе комусь!

Ось простий демонстраційний випадок використання джерела плагіна з обіцянками. Демонстраційна сторінка містить в собі безліч інших, «краще» UX прикладів.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

@JohnCulviner: чи можу я надіслати дані json у своєму пості. Я спробував це і не вдався. Чи можете ви надати мені зразок
Сараванан

Чи можливо передати параметри виклику? скажімо, що мені потрібно передати деякі ідентифікатори для того, щоб сервер генерував файл, який я хочу завантажити, як це зробити? спасибі
omer schleifer

Зробили 100. Оголошення. Дякую за ваш час - це дійсно цінно. Розгляньте можливість встановити посилання на PayPal для отримання пожертв. Я б пожертвував.
Стефан Шінкель

Я спробував це, але зворотні дзвінки ніколи не виконуються. Плагін просто відкриє сервісну відповідь на новій вкладці, навіть коли служба повертає помилку. Я не хочу, щоб програма відкривала нову вкладку та відображала відповідь служби при помилці. Я навіть додав файли cookie, щоб вказати на ідентифікацію завантаженості істинної та помилкової щодо успіху та невдачі, але все ж відповідь відкривається в новій вкладці .. будь-який спосіб виправити це .. Я використовую метод get.
Вішал Гулаті

1
@MarkAmery працює також, як вказали інші відповіді. Такий підхід (AFAIK) не дає відгуку про те, коли завантаження розпочнеться, коли воно завершиться та чи помилилось, що зручно. Я можу додати це до відповіді на варіант "пожежі та забудь". Також атрибут [завантажити] не дозволяє також розміщувати POST або щось екзотичне.
Джон Кульвінер

142
function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

Перевірте, чи цільові веб-переглядачі безперебійно працюватимуть вищевказаним фрагментом:
http://caniuse.com/#feat=download


1
завантажити ім'я файлу не змінилося ... протестовано в хромі, квітень 2015
Новелізатор

7
Для мене це було б ідеально, але це також не працює на Firefox. Будь-яка ідея?
g07kore

2
Як уже згадувалося в caniuse.com/#feat=download , це працює лише для посилань з однаковим походженням у останніх випусках Firefox та Chrome. Тож якщо ваші посилання вказують на інший домен, наразі він навряд чи працює.
джин-батист

9
Щоб він працював на Firefox, зробіть його document.body.appendChild(link)перед натисканням і після клацання, link.remove()щоб уникнути забруднення DOM.
Оку

1
Ви також можете зробити це, link.download = ""щоб воно зберегло своє початкове ім'я файлу, і щоб уникнути необхідності його встановлення.
Оку

69

Я здивований, що не багато людей знають про атрибут завантаження елементів. Будь ласка, допоможіть поширити слово про це! Ви можете мати приховане посилання HTML і підробити клацання по ньому. Якщо у HTML-посилання є атрибут завантаження, він завантажує файл, не переглядає його, незалежно від того. Ось код. Він завантажить зображення кота, якщо він зможе його знайти.

document.getElementById('download').click();
<a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>

Примітка. Це підтримується не в усіх браузерах: http://www.w3schools.com/tags/att_a_download.asp


12
Не підтримується в IE та Safari
MatPag

9
Chrome завантажується, але Firefox просто показує зображення.
Саран

+1 за надання цього виконавчого фрагмента. Врятував мені час тестувати його лише для того, щоб дізнатися, що це не спрацює.
Дупі

4
Останній Chrome (серпня 2018 року) також показує зображення (через абсурдне обмеження безпеки), тому не вдається
користувач1156544

Chrome не завантажується для mp4s
Nearoo

53

Я рекомендую використовувати в downloadатрибут для завантаження замість JQuery:

<a href="your_link" download> file_name </a>

Це завантажить ваш файл, не відкриваючи його.


5
Він підтримуватиме лише Chrome, Firefox, Opera та IE (> = 13.0)
Kunal Kakkad,

Край> = 13, а не IE. Також реалізація Edge 13 є помилковою, оскільки ім'я файлу ігнорується, а натомість ви отримуєте файл з ідентифікатором як ім'я.
Девід

8
На мою думку, це правильна відповідь на питання. Інші відповіді мають сенс, якщо вам потрібно підтримувати застарілі веб-переглядачі та потребуєте вирішення.
crabCRUSHERclamCOLLECTOR

19

Якщо ви вже використовуєте jQuery, ви можете використати його, щоб створити менший фрагмент.
Версія jQuery відповіді Ендрю:

var $idown;  // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
  if ($idown) {
    $idown.attr('src',url);
  } else {
    $idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
  }
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');

FYI, хтось запропонував (через редагування моєї публікації) додати $ idown.attr ('src', url); після створення фрейму вперше. Я не думаю, що це потрібно. На кроці створення вже встановлено 'src: url'.
corbacho

Також прокоментуйте, що нарешті я не використав це рішення, тому що IE 9 не любив динамічно створені рамки, що вказують на http: //, коли ви знаходитесь у мережі https. Мені довелося скористатися "window.location.href", рішенням, яке також має деякі незручності
corbacho

частина "if ($ idown)" не працювала для мене в останньому Chrome (24), а просто створювала нескінченну кількість кадрів. Може тому, що я хотів завантажити 12 речей одночасно?
несур

6
ifЗаява дійсно має бути:if( $idown && $idown.length > 0 )
iOnline247

3
Не робить нічого в Chrome
jjxtra

11

Працює на Chrome, Firefox та IE8 та вище.

var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();

Це також працює, якщо ви не додаєте посилання до DOM.
Джонні Карр

Якщо заголовки, повернені з сервера, не вказують на те, що робити інакше, це буде просто переходити до нього url, а не завантажуватися з нього.
Марк Амері

10

Простий приклад з використанням iframe

function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
        iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

Тоді просто зателефонуйте до функції, куди хочете:

downloadURL('path/to/my/file');


10

Це може бути корисно, якщо вам не потрібно переходити на іншу сторінку. Це основна функція javascript, тому її можна використовувати на будь-якій платформі, де бекенд знаходиться в Javascript

window.location.assign('any url or file path')

Це, мабуть, найпростіше рішення, якщо ви можете встановити contentType самостійно. Я використовую його як: window.location.href = downloadFileUrl;
BluE

Якщо адміністратор не хоче показувати URL-адресу користувачеві, ніж?
Нарен Верма

9

Тільки через сім років тут з'являється однорядове рішення jQuery, використовуючи форму замість iframe або посилання:

$('<form></form>')
     .attr('action', filePath)
     .appendTo('body').submit().remove();

Я перевірив це в

  • Chrome 55
  • Firefox 50
  • Край IE8-10
  • iOS 10 (Safari / Chrome)
  • Android Chrome

Якщо хтось знає якісь недоліки у цьому рішенні, я був би дуже радий почути про них.


Повна демонстрація:

<html>
<head><script src="https://code.jquery.com/jquery-1.11.3.js"></script></head>
<body>
<script>
    var filePath = window.prompt("Enter a file URL","http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip");
    $('<form></form>').attr('action', filePath).appendTo('body').submit().remove();
</script>
</body>
</html>

7
Це не працює, якщо у вас filePathє рядок запитів, оскільки подання форми замінить атрибут запиту в атрибут дії.
Бобборт

1
Я workarrounded це шляхом додавання входу в форму: var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue'); $('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();Це еквівалентно acessing:filepath?myQsKey=myValue
Harald Hoerwick

Це також закриває веб-розетки.
radu122

2
Це виглядає як дуже складний шлях до набору window.locationв filePath. Просто window.location = filePath;зробив би те саме.
Іво Смітс

Незалежно від того, чи є в цьому рішенні недолік , самі по собі ви не надали жодних перешкод для використання цього посилання. (І є мінус: ви не можете використовувати цей downloadатрибут таким чином, щоб сказати браузеру, що ви хочете завантажити, незалежно від того, які заголовки повертає сервер, що ви можете зробити з aелементом.)
Марк Амерді

5

Я не знаю, чи це питання занадто старе, але встановлення window.location для URL-адреси завантаження спрацює, якщо тип mime для завантаження є правильним (наприклад, zip-архів).

var download = function(downloadURL) {

   location = downloadURL;

});

download('http://example.com/archive.zip'); //correct usage
download('http://example.com/page.html'); //DON'T

5

У кінцевому підсумку я використав фрагмент нижче, і він працює в більшості браузерів, проте не перевіряється в IE.

let data = JSON.stringify([{email: "test@domain.com", name: "test"}, {email: "anothertest@example.com", name: "anothertest"}]);

let type = "application/json", name = "testfile.json";
downloader(data, type, name)

function downloader(data, type, name) {
	let blob = new Blob([data], {type});
	let url = window.URL.createObjectURL(blob);
	downloadURI(url, name);
	window.URL.revokeObjectURL(url);
}

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

Оновлення

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

function downloader(data, type, name) {
    let blob = new Blob([data], {type});
    let url = window.URL.createObjectURL(blob);
    downloadURI(url, name);
    window.URL.revokeObjectURL(url);
}

Який сенс використовувати MouseEventтут, а не завжди використовувати click? І навіщо додавати посилання на документ перед його натисканням? Можливо, це має переваги перед більш простим підходом, показаним у stackoverflow.com/a/23013574/1709587 , але якщо так, вони тут не пояснюються.
Марк Амерді

Минув цю відповідь. Я не можу згадати, чи є якась причина для цих непотрібних рядків коду.
Абк

3

Щоб покращити відповідь Imagine Breaker, це підтримується у FF & IE:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.dispatchEvent(evt);
}

Іншими словами, просто використовуйте dispatchEventфункцію замість click();


Як це поліпшення? Здається, це просто складніший спосіб зробити те саме.
Марк Амерді

3

Можливо, просто у вашому javascript відкриється сторінка, яка просто завантажує файл, як, наприклад, під час перетягування посилання на нову вкладку:

Window.open("https://www.MyServer.
Org/downloads/ardiuno/WgiWho=?:8080")

Відкривши вікно, відкрийте сторінку завантаження, яка автоматично закривається.


1
Це створює спливаюче вікно, яке блокує більшість браузерів
Ештон Вірсдорф

3

Наступний найповніший та працюючий (випробуваний) код для завантаження даних для FireFox, Chrome та IE. Припустимо, що дані в полі texarea , що має id = 'textarea_area', а ім'я файлу - це ім'я файлу, куди будуть завантажуватися дані.

function download(filename) {
    if (typeof filename==='undefined') filename = ""; // default
    value = document.getElementById('textarea_area').value;

    filetype="text/*";
    extension=filename.substring(filename.lastIndexOf("."));
    for (var i = 0; i < extToMIME.length; i++) {
        if (extToMIME[i][0].localeCompare(extension)==0) {
            filetype=extToMIME[i][1];
            break;
        }
    }


    var pom = document.createElement('a');
    pom.setAttribute('href', 'data: '+filetype+';charset=utf-8,' + '\ufeff' + encodeURIComponent(value)); // Added BOM too
    pom.setAttribute('download', filename);


    if (document.createEvent) {
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { // IE
            blobObject = new Blob(['\ufeff'+value]);
            window.navigator.msSaveBlob(blobObject, filename);
        } else { // FF, Chrome
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);
        }
    } else if( document.createEventObject ) { // Have No Idea
        var evObj = document.createEventObject();
        pom.fireEvent( 'onclick' , evObj );
    } else { // For Any Case
        pom.click();
    }

}

а потім просто зателефонуйте

<a href="javascript:download();">Download</a>

Для ініціювання завантаження.

Масив для встановлення правильного типу MIME для діалогу завантаження МОЖЕ бути наступним:

// ----------------------- Extensions to MIME --------- //

        // List of mime types
        // combination of values from Windows 7 Registry and 
        // from C:\Windows\System32\inetsrv\config\applicationHost.config
        // some added, including .7z and .dat
    var extToMIME = [
        [".323", "text/h323"],
        [".3g2", "video/3gpp2"],
        [".3gp", "video/3gpp"],
        [".3gp2", "video/3gpp2"],
        [".3gpp", "video/3gpp"],
        [".7z", "application/x-7z-compressed"],
        [".aa", "audio/audible"],
        [".AAC", "audio/aac"],
        [".aaf", "application/octet-stream"],
        [".aax", "audio/vnd.audible.aax"],
        [".ac3", "audio/ac3"],
        [".aca", "application/octet-stream"],
        [".accda", "application/msaccess.addin"],
        [".accdb", "application/msaccess"],
        [".accdc", "application/msaccess.cab"],
        [".accde", "application/msaccess"],
        [".accdr", "application/msaccess.runtime"],
        [".accdt", "application/msaccess"],
        [".accdw", "application/msaccess.webapplication"],
        [".accft", "application/msaccess.ftemplate"],
        [".acx", "application/internet-property-stream"],
        [".AddIn", "text/xml"],
        [".ade", "application/msaccess"],
        [".adobebridge", "application/x-bridge-url"],
        [".adp", "application/msaccess"],
        [".ADT", "audio/vnd.dlna.adts"],
        [".ADTS", "audio/aac"],
        [".afm", "application/octet-stream"],
        [".ai", "application/postscript"],
        [".aif", "audio/x-aiff"],
        [".aifc", "audio/aiff"],
        [".aiff", "audio/aiff"],
        [".air", "application/vnd.adobe.air-application-installer-package+zip"],
        [".amc", "application/x-mpeg"],
        [".application", "application/x-ms-application"],
        [".art", "image/x-jg"],
        [".asa", "application/xml"],
        [".asax", "application/xml"],
        [".ascx", "application/xml"],
        [".asd", "application/octet-stream"],
        [".asf", "video/x-ms-asf"],
        [".ashx", "application/xml"],
        [".asi", "application/octet-stream"],
        [".asm", "text/plain"],
        [".asmx", "application/xml"],
        [".aspx", "application/xml"],
        [".asr", "video/x-ms-asf"],
        [".asx", "video/x-ms-asf"],
        [".atom", "application/atom+xml"],
        [".au", "audio/basic"],
        [".avi", "video/x-msvideo"],
        [".axs", "application/olescript"],
        [".bas", "text/plain"],
        [".bcpio", "application/x-bcpio"],
        [".bin", "application/octet-stream"],
        [".bmp", "image/bmp"],
        [".c", "text/plain"],
        [".cab", "application/octet-stream"],
        [".caf", "audio/x-caf"],
        [".calx", "application/vnd.ms-office.calx"],
        [".cat", "application/vnd.ms-pki.seccat"],
        [".cc", "text/plain"],
        [".cd", "text/plain"],
        [".cdda", "audio/aiff"],
        [".cdf", "application/x-cdf"],
        [".cer", "application/x-x509-ca-cert"],
        [".chm", "application/octet-stream"],
        [".class", "application/x-java-applet"],
        [".clp", "application/x-msclip"],
        [".cmx", "image/x-cmx"],
        [".cnf", "text/plain"],
        [".cod", "image/cis-cod"],
        [".config", "application/xml"],
        [".contact", "text/x-ms-contact"],
        [".coverage", "application/xml"],
        [".cpio", "application/x-cpio"],
        [".cpp", "text/plain"],
        [".crd", "application/x-mscardfile"],
        [".crl", "application/pkix-crl"],
        [".crt", "application/x-x509-ca-cert"],
        [".cs", "text/plain"],
        [".csdproj", "text/plain"],
        [".csh", "application/x-csh"],
        [".csproj", "text/plain"],
        [".css", "text/css"],
        [".csv", "text/csv"],
        [".cur", "application/octet-stream"],
        [".cxx", "text/plain"],
        [".dat", "application/octet-stream"],
        [".datasource", "application/xml"],
        [".dbproj", "text/plain"],
        [".dcr", "application/x-director"],
        [".def", "text/plain"],
        [".deploy", "application/octet-stream"],
        [".der", "application/x-x509-ca-cert"],
        [".dgml", "application/xml"],
        [".dib", "image/bmp"],
        [".dif", "video/x-dv"],
        [".dir", "application/x-director"],
        [".disco", "text/xml"],
        [".dll", "application/x-msdownload"],
        [".dll.config", "text/xml"],
        [".dlm", "text/dlm"],
        [".doc", "application/msword"],
        [".docm", "application/vnd.ms-word.document.macroEnabled.12"],
        [".docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
        [".dot", "application/msword"],
        [".dotm", "application/vnd.ms-word.template.macroEnabled.12"],
        [".dotx", "application/vnd.openxmlformats-officedocument.wordprocessingml.template"],
        [".dsp", "application/octet-stream"],
        [".dsw", "text/plain"],
        [".dtd", "text/xml"],
        [".dtsConfig", "text/xml"],
        [".dv", "video/x-dv"],
        [".dvi", "application/x-dvi"],
        [".dwf", "drawing/x-dwf"],
        [".dwp", "application/octet-stream"],
        [".dxr", "application/x-director"],
        [".eml", "message/rfc822"],
        [".emz", "application/octet-stream"],
        [".eot", "application/octet-stream"],
        [".eps", "application/postscript"],
        [".etl", "application/etl"],
        [".etx", "text/x-setext"],
        [".evy", "application/envoy"],
        [".exe", "application/octet-stream"],
        [".exe.config", "text/xml"],
        [".fdf", "application/vnd.fdf"],
        [".fif", "application/fractals"],
        [".filters", "Application/xml"],
        [".fla", "application/octet-stream"],
        [".flr", "x-world/x-vrml"],
        [".flv", "video/x-flv"],
        [".fsscript", "application/fsharp-script"],
        [".fsx", "application/fsharp-script"],
        [".generictest", "application/xml"],
        [".gif", "image/gif"],
        [".group", "text/x-ms-group"],
        [".gsm", "audio/x-gsm"],
        [".gtar", "application/x-gtar"],
        [".gz", "application/x-gzip"],
        [".h", "text/plain"],
        [".hdf", "application/x-hdf"],
        [".hdml", "text/x-hdml"],
        [".hhc", "application/x-oleobject"],
        [".hhk", "application/octet-stream"],
        [".hhp", "application/octet-stream"],
        [".hlp", "application/winhlp"],
        [".hpp", "text/plain"],
        [".hqx", "application/mac-binhex40"],
        [".hta", "application/hta"],
        [".htc", "text/x-component"],
        [".htm", "text/html"],
        [".html", "text/html"],
        [".htt", "text/webviewhtml"],
        [".hxa", "application/xml"],
        [".hxc", "application/xml"],
        [".hxd", "application/octet-stream"],
        [".hxe", "application/xml"],
        [".hxf", "application/xml"],
        [".hxh", "application/octet-stream"],
        [".hxi", "application/octet-stream"],
        [".hxk", "application/xml"],
        [".hxq", "application/octet-stream"],
        [".hxr", "application/octet-stream"],
        [".hxs", "application/octet-stream"],
        [".hxt", "text/html"],
        [".hxv", "application/xml"],
        [".hxw", "application/octet-stream"],
        [".hxx", "text/plain"],
        [".i", "text/plain"],
        [".ico", "image/x-icon"],
        [".ics", "application/octet-stream"],
        [".idl", "text/plain"],
        [".ief", "image/ief"],
        [".iii", "application/x-iphone"],
        [".inc", "text/plain"],
        [".inf", "application/octet-stream"],
        [".inl", "text/plain"],
        [".ins", "application/x-internet-signup"],
        [".ipa", "application/x-itunes-ipa"],
        [".ipg", "application/x-itunes-ipg"],
        [".ipproj", "text/plain"],
        [".ipsw", "application/x-itunes-ipsw"],
        [".iqy", "text/x-ms-iqy"],
        [".isp", "application/x-internet-signup"],
        [".ite", "application/x-itunes-ite"],
        [".itlp", "application/x-itunes-itlp"],
        [".itms", "application/x-itunes-itms"],
        [".itpc", "application/x-itunes-itpc"],
        [".IVF", "video/x-ivf"],
        [".jar", "application/java-archive"],
        [".java", "application/octet-stream"],
        [".jck", "application/liquidmotion"],
        [".jcz", "application/liquidmotion"],
        [".jfif", "image/pjpeg"],
        [".jnlp", "application/x-java-jnlp-file"],
        [".jpb", "application/octet-stream"],
        [".jpe", "image/jpeg"],
        [".jpeg", "image/jpeg"],
        [".jpg", "image/jpeg"],
        [".js", "application/x-javascript"],
        [".json", "application/json"],
        [".jsx", "text/jscript"],
        [".jsxbin", "text/plain"],
        [".latex", "application/x-latex"],
        [".library-ms", "application/windows-library+xml"],
        [".lit", "application/x-ms-reader"],
        [".loadtest", "application/xml"],
        [".lpk", "application/octet-stream"],
        [".lsf", "video/x-la-asf"],
        [".lst", "text/plain"],
        [".lsx", "video/x-la-asf"],
        [".lzh", "application/octet-stream"],
        [".m13", "application/x-msmediaview"],
        [".m14", "application/x-msmediaview"],
        [".m1v", "video/mpeg"],
        [".m2t", "video/vnd.dlna.mpeg-tts"],
        [".m2ts", "video/vnd.dlna.mpeg-tts"],
        [".m2v", "video/mpeg"],
        [".m3u", "audio/x-mpegurl"],
        [".m3u8", "audio/x-mpegurl"],
        [".m4a", "audio/m4a"],
        [".m4b", "audio/m4b"],
        [".m4p", "audio/m4p"],
        [".m4r", "audio/x-m4r"],
        [".m4v", "video/x-m4v"],
        [".mac", "image/x-macpaint"],
        [".mak", "text/plain"],
        [".man", "application/x-troff-man"],
        [".manifest", "application/x-ms-manifest"],
        [".map", "text/plain"],
        [".master", "application/xml"],
        [".mda", "application/msaccess"],
        [".mdb", "application/x-msaccess"],
        [".mde", "application/msaccess"],
        [".mdp", "application/octet-stream"],
        [".me", "application/x-troff-me"],
        [".mfp", "application/x-shockwave-flash"],
        [".mht", "message/rfc822"],
        [".mhtml", "message/rfc822"],
        [".mid", "audio/mid"],
        [".midi", "audio/mid"],
        [".mix", "application/octet-stream"],
        [".mk", "text/plain"],
        [".mmf", "application/x-smaf"],
        [".mno", "text/xml"],
        [".mny", "application/x-msmoney"],
        [".mod", "video/mpeg"],
        [".mov", "video/quicktime"],
        [".movie", "video/x-sgi-movie"],
        [".mp2", "video/mpeg"],
        [".mp2v", "video/mpeg"],
        [".mp3", "audio/mpeg"],
        [".mp4", "video/mp4"],
        [".mp4v", "video/mp4"],
        [".mpa", "video/mpeg"],
        [".mpe", "video/mpeg"],
        [".mpeg", "video/mpeg"],
        [".mpf", "application/vnd.ms-mediapackage"],
        [".mpg", "video/mpeg"],
        [".mpp", "application/vnd.ms-project"],
        [".mpv2", "video/mpeg"],
        [".mqv", "video/quicktime"],
        [".ms", "application/x-troff-ms"],
        [".msi", "application/octet-stream"],
        [".mso", "application/octet-stream"],
        [".mts", "video/vnd.dlna.mpeg-tts"],
        [".mtx", "application/xml"],
        [".mvb", "application/x-msmediaview"],
        [".mvc", "application/x-miva-compiled"],
        [".mxp", "application/x-mmxp"],
        [".nc", "application/x-netcdf"],
        [".nsc", "video/x-ms-asf"],
        [".nws", "message/rfc822"],
        [".ocx", "application/octet-stream"],
        [".oda", "application/oda"],
        [".odc", "text/x-ms-odc"],
        [".odh", "text/plain"],
        [".odl", "text/plain"],
        [".odp", "application/vnd.oasis.opendocument.presentation"],
        [".ods", "application/oleobject"],
        [".odt", "application/vnd.oasis.opendocument.text"],
        [".one", "application/onenote"],
        [".onea", "application/onenote"],
        [".onepkg", "application/onenote"],
        [".onetmp", "application/onenote"],
        [".onetoc", "application/onenote"],
        [".onetoc2", "application/onenote"],
        [".orderedtest", "application/xml"],
        [".osdx", "application/opensearchdescription+xml"],
        [".p10", "application/pkcs10"],
        [".p12", "application/x-pkcs12"],
        [".p7b", "application/x-pkcs7-certificates"],
        [".p7c", "application/pkcs7-mime"],
        [".p7m", "application/pkcs7-mime"],
        [".p7r", "application/x-pkcs7-certreqresp"],
        [".p7s", "application/pkcs7-signature"],
        [".pbm", "image/x-portable-bitmap"],
        [".pcast", "application/x-podcast"],
        [".pct", "image/pict"],
        [".pcx", "application/octet-stream"],
        [".pcz", "application/octet-stream"],
        [".pdf", "application/pdf"],
        [".pfb", "application/octet-stream"],
        [".pfm", "application/octet-stream"],
        [".pfx", "application/x-pkcs12"],
        [".pgm", "image/x-portable-graymap"],
        [".pic", "image/pict"],
        [".pict", "image/pict"],
        [".pkgdef", "text/plain"],
        [".pkgundef", "text/plain"],
        [".pko", "application/vnd.ms-pki.pko"],
        [".pls", "audio/scpls"],
        [".pma", "application/x-perfmon"],
        [".pmc", "application/x-perfmon"],
        [".pml", "application/x-perfmon"],
        [".pmr", "application/x-perfmon"],
        [".pmw", "application/x-perfmon"],
        [".png", "image/png"],
        [".pnm", "image/x-portable-anymap"],
        [".pnt", "image/x-macpaint"],
        [".pntg", "image/x-macpaint"],
        [".pnz", "image/png"],
        [".pot", "application/vnd.ms-powerpoint"],
        [".potm", "application/vnd.ms-powerpoint.template.macroEnabled.12"],
        [".potx", "application/vnd.openxmlformats-officedocument.presentationml.template"],
        [".ppa", "application/vnd.ms-powerpoint"],
        [".ppam", "application/vnd.ms-powerpoint.addin.macroEnabled.12"],
        [".ppm", "image/x-portable-pixmap"],
        [".pps", "application/vnd.ms-powerpoint"],
        [".ppsm", "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
        [".ppsx", "application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
        [".ppt", "application/vnd.ms-powerpoint"],
        [".pptm", "application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
        [".pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"],
        [".prf", "application/pics-rules"],
        [".prm", "application/octet-stream"],
        [".prx", "application/octet-stream"],
        [".ps", "application/postscript"],
        [".psc1", "application/PowerShell"],
        [".psd", "application/octet-stream"],
        [".psess", "application/xml"],
        [".psm", "application/octet-stream"],
        [".psp", "application/octet-stream"],
        [".pub", "application/x-mspublisher"],
        [".pwz", "application/vnd.ms-powerpoint"],
        [".qht", "text/x-html-insertion"],
        [".qhtm", "text/x-html-insertion"],
        [".qt", "video/quicktime"],
        [".qti", "image/x-quicktime"],
        [".qtif", "image/x-quicktime"],
        [".qtl", "application/x-quicktimeplayer"],
        [".qxd", "application/octet-stream"],
        [".ra", "audio/x-pn-realaudio"],
        [".ram", "audio/x-pn-realaudio"],
        [".rar", "application/octet-stream"],
        [".ras", "image/x-cmu-raster"],
        [".rat", "application/rat-file"],
        [".rc", "text/plain"],
        [".rc2", "text/plain"],
        [".rct", "text/plain"],
        [".rdlc", "application/xml"],
        [".resx", "application/xml"],
        [".rf", "image/vnd.rn-realflash"],
        [".rgb", "image/x-rgb"],
        [".rgs", "text/plain"],
        [".rm", "application/vnd.rn-realmedia"],
        [".rmi", "audio/mid"],
        [".rmp", "application/vnd.rn-rn_music_package"],
        [".roff", "application/x-troff"],
        [".rpm", "audio/x-pn-realaudio-plugin"],
        [".rqy", "text/x-ms-rqy"],
        [".rtf", "application/rtf"],
        [".rtx", "text/richtext"],
        [".ruleset", "application/xml"],
        [".s", "text/plain"],
        [".safariextz", "application/x-safari-safariextz"],
        [".scd", "application/x-msschedule"],
        [".sct", "text/scriptlet"],
        [".sd2", "audio/x-sd2"],
        [".sdp", "application/sdp"],
        [".sea", "application/octet-stream"],
        [".searchConnector-ms", "application/windows-search-connector+xml"],
        [".setpay", "application/set-payment-initiation"],
        [".setreg", "application/set-registration-initiation"],
        [".settings", "application/xml"],
        [".sgimb", "application/x-sgimb"],
        [".sgml", "text/sgml"],
        [".sh", "application/x-sh"],
        [".shar", "application/x-shar"],
        [".shtml", "text/html"],
        [".sit", "application/x-stuffit"],
        [".sitemap", "application/xml"],
        [".skin", "application/xml"],
        [".sldm", "application/vnd.ms-powerpoint.slide.macroEnabled.12"],
        [".sldx", "application/vnd.openxmlformats-officedocument.presentationml.slide"],
        [".slk", "application/vnd.ms-excel"],
        [".sln", "text/plain"],
        [".slupkg-ms", "application/x-ms-license"],
        [".smd", "audio/x-smd"],
        [".smi", "application/octet-stream"],
        [".smx", "audio/x-smd"],
        [".smz", "audio/x-smd"],
        [".snd", "audio/basic"],
        [".snippet", "application/xml"],
        [".snp", "application/octet-stream"],
        [".sol", "text/plain"],
        [".sor", "text/plain"],
        [".spc", "application/x-pkcs7-certificates"],
        [".spl", "application/futuresplash"],
        [".src", "application/x-wais-source"],
        [".srf", "text/plain"],
        [".SSISDeploymentManifest", "text/xml"],
        [".ssm", "application/streamingmedia"],
        [".sst", "application/vnd.ms-pki.certstore"],
        [".stl", "application/vnd.ms-pki.stl"],
        [".sv4cpio", "application/x-sv4cpio"],
        [".sv4crc", "application/x-sv4crc"],
        [".svc", "application/xml"],
        [".swf", "application/x-shockwave-flash"],
        [".t", "application/x-troff"],
        [".tar", "application/x-tar"],
        [".tcl", "application/x-tcl"],
        [".testrunconfig", "application/xml"],
        [".testsettings", "application/xml"],
        [".tex", "application/x-tex"],
        [".texi", "application/x-texinfo"],
        [".texinfo", "application/x-texinfo"],
        [".tgz", "application/x-compressed"],
        [".thmx", "application/vnd.ms-officetheme"],
        [".thn", "application/octet-stream"],
        [".tif", "image/tiff"],
        [".tiff", "image/tiff"],
        [".tlh", "text/plain"],
        [".tli", "text/plain"],
        [".toc", "application/octet-stream"],
        [".tr", "application/x-troff"],
        [".trm", "application/x-msterminal"],
        [".trx", "application/xml"],
        [".ts", "video/vnd.dlna.mpeg-tts"],
        [".tsv", "text/tab-separated-values"],
        [".ttf", "application/octet-stream"],
        [".tts", "video/vnd.dlna.mpeg-tts"],
        [".txt", "text/plain"],
        [".u32", "application/octet-stream"],
        [".uls", "text/iuls"],
        [".user", "text/plain"],
        [".ustar", "application/x-ustar"],
        [".vb", "text/plain"],
        [".vbdproj", "text/plain"],
        [".vbk", "video/mpeg"],
        [".vbproj", "text/plain"],
        [".vbs", "text/vbscript"],
        [".vcf", "text/x-vcard"],
        [".vcproj", "Application/xml"],
        [".vcs", "text/plain"],
        [".vcxproj", "Application/xml"],
        [".vddproj", "text/plain"],
        [".vdp", "text/plain"],
        [".vdproj", "text/plain"],
        [".vdx", "application/vnd.ms-visio.viewer"],
        [".vml", "text/xml"],
        [".vscontent", "application/xml"],
        [".vsct", "text/xml"],
        [".vsd", "application/vnd.visio"],
        [".vsi", "application/ms-vsi"],
        [".vsix", "application/vsix"],
        [".vsixlangpack", "text/xml"],
        [".vsixmanifest", "text/xml"],
        [".vsmdi", "application/xml"],
        [".vspscc", "text/plain"],
        [".vss", "application/vnd.visio"],
        [".vsscc", "text/plain"],
        [".vssettings", "text/xml"],
        [".vssscc", "text/plain"],
        [".vst", "application/vnd.visio"],
        [".vstemplate", "text/xml"],
        [".vsto", "application/x-ms-vsto"],
        [".vsw", "application/vnd.visio"],
        [".vsx", "application/vnd.visio"],
        [".vtx", "application/vnd.visio"],
        [".wav", "audio/wav"],
        [".wave", "audio/wav"],
        [".wax", "audio/x-ms-wax"],
        [".wbk", "application/msword"],
        [".wbmp", "image/vnd.wap.wbmp"],
        [".wcm", "application/vnd.ms-works"],
        [".wdb", "application/vnd.ms-works"],
        [".wdp", "image/vnd.ms-photo"],
        [".webarchive", "application/x-safari-webarchive"],
        [".webtest", "application/xml"],
        [".wiq", "application/xml"],
        [".wiz", "application/msword"],
        [".wks", "application/vnd.ms-works"],
        [".WLMP", "application/wlmoviemaker"],
        [".wlpginstall", "application/x-wlpg-detect"],
        [".wlpginstall3", "application/x-wlpg3-detect"],
        [".wm", "video/x-ms-wm"],
        [".wma", "audio/x-ms-wma"],
        [".wmd", "application/x-ms-wmd"],
        [".wmf", "application/x-msmetafile"],
        [".wml", "text/vnd.wap.wml"],
        [".wmlc", "application/vnd.wap.wmlc"],
        [".wmls", "text/vnd.wap.wmlscript"],
        [".wmlsc", "application/vnd.wap.wmlscriptc"],
        [".wmp", "video/x-ms-wmp"],
        [".wmv", "video/x-ms-wmv"],
        [".wmx", "video/x-ms-wmx"],
        [".wmz", "application/x-ms-wmz"],
        [".wpl", "application/vnd.ms-wpl"],
        [".wps", "application/vnd.ms-works"],
        [".wri", "application/x-mswrite"],
        [".wrl", "x-world/x-vrml"],
        [".wrz", "x-world/x-vrml"],
        [".wsc", "text/scriptlet"],
        [".wsdl", "text/xml"],
        [".wvx", "video/x-ms-wvx"],
        [".x", "application/directx"],
        [".xaf", "x-world/x-vrml"],
        [".xaml", "application/xaml+xml"],
        [".xap", "application/x-silverlight-app"],
        [".xbap", "application/x-ms-xbap"],
        [".xbm", "image/x-xbitmap"],
        [".xdr", "text/plain"],
        [".xht", "application/xhtml+xml"],
        [".xhtml", "application/xhtml+xml"],
        [".xla", "application/vnd.ms-excel"],
        [".xlam", "application/vnd.ms-excel.addin.macroEnabled.12"],
        [".xlc", "application/vnd.ms-excel"],
        [".xld", "application/vnd.ms-excel"],
        [".xlk", "application/vnd.ms-excel"],
        [".xll", "application/vnd.ms-excel"],
        [".xlm", "application/vnd.ms-excel"],
        [".xls", "application/vnd.ms-excel"],
        [".xlsb", "application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
        [".xlsm", "application/vnd.ms-excel.sheet.macroEnabled.12"],
        [".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
        [".xlt", "application/vnd.ms-excel"],
        [".xltm", "application/vnd.ms-excel.template.macroEnabled.12"],
        [".xltx", "application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
        [".xlw", "application/vnd.ms-excel"],
        [".xml", "text/xml"],
        [".xmta", "application/xml"],
        [".xof", "x-world/x-vrml"],
        [".XOML", "text/plain"],
        [".xpm", "image/x-xpixmap"],
        [".xps", "application/vnd.ms-xpsdocument"],
        [".xrm-ms", "text/xml"],
        [".xsc", "application/xml"],
        [".xsd", "text/xml"],
        [".xsf", "text/xml"],
        [".xsl", "text/xml"],
        [".xslt", "text/xml"],
        [".xsn", "application/octet-stream"],
        [".xss", "application/xml"],
        [".xtp", "application/octet-stream"],
        [".xwd", "image/x-xwindowdump"],
        [".z", "application/x-compress"],
        [".zip", "application/x-zip-compressed"]
];

// ----------------------- End of Extensions to MIME --------- //

- Я пробував це з файлами pdf. Файл завантажується, але він завжди пошкоджується. Будь-які пропозиції? Дякую
Shrivaths Kulkarni

2

для мене це працює нормально перевірено в chrome v72

function down_file(url,name){
var a = $("<a>")
    .attr("href", url)
    .attr("download", name)
    .appendTo("body");
a[0].click();
a.remove();
}

down_file('https://www.useotools.com/uploads/nulogo[1].png','logo.png')

Це такий же підхід, як показано у відповіді Imagine Breaker роками раніше, але з додатковим недоліком необхідності jQuery.
Марк Амерді

1

У мене були хороші результати з використанням тегу FORM, оскільки він працює скрізь, і вам не потрібно створювати тимчасові файли на сервері. Метод працює так.

На стороні клієнта (сторінка HTML) ви створюєте невидиму форму, як ця

<form method="POST" action="/download.php" target="_blank" id="downloadForm">
    <input type="hidden" name="data" id="csv">
</form>

Потім ви додаєте цей код Javascript у вашу кнопку:

$('#button').click(function() {
     $('#csv').val('---your data---');
     $('#downloadForm').submit();
}

На стороні сервера у вас є такий PHP-код download.php:

<?php
header('Content-Type: text/csv');
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=out.csv');
header('Content-Transfer-Encoding: binary');
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . strlen($data));

echo $_REQUEST['data'];
exit();

Ви навіть можете створювати поштові файли зі своїх даних таким чином:

<?php

$file = tempnam("tmp", "zip");

$zip = new ZipArchive();
$zip->open($file, ZipArchive::OVERWRITE);
$zip->addFromString('test.csv', $_REQUEST['data']);
$zip->close();

header('Content-Type: application/zip');
header('Content-Length: ' . filesize($file));
header('Content-Disposition: attachment; filename="file.zip"');
readfile($file);
unlink($file); 

Найкраще, що він не залишає на вашому сервері залишкових файлів, оскільки все створюється та знищується на льоту!


0

Відповідь, подана hitesh 30 грудня 1313 року, насправді працює. Це просто вимагає трохи коригування:

Файл PHP може телефонувати сам. Іншими словами, просто створіть файл на ім'я saveAs.php і вставте в нього цей код ...

        <a href="saveAs.php?file_source=YourDataFile.pdf">Download pdf here</a>

    <?php
        if (isset($_GET['file_source'])) {
            $fullPath = $_GET['file_source'];
            if($fullPath) {
                $fsize = filesize($fullPath);
                $path_parts = pathinfo($fullPath);
                $ext = strtolower($path_parts["extension"]);
                switch ($ext) {
                    case "pdf":
                    header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
                    header("Content-type: application/pdf"); // add here more headers for diff. extensions
                    break;
                    default;
                    header("Content-type: application/octet-stream");
                    header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
                }
                if($fsize) {//checking if file size exist
                  header("Content-length: $fsize");
                }
                readfile($fullPath);
                exit;
            }
        }
    ?>

0

Ці функції використовуються в stacktrace.js :

/**
 * Try XHR methods in order and store XHR factory.
 *
 * @return <Function> XHR function or equivalent
 */
var createXMLHTTPObject = function() {
    var xmlhttp, XMLHttpFactories = [
        function() {
            return new XMLHttpRequest();
        }, function() {
            return new ActiveXObject('Msxml2.XMLHTTP');
        }, function() {
            return new ActiveXObject('Msxml3.XMLHTTP');
        }, function() {
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    ];
    for (var i = 0; i < XMLHttpFactories.length; i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
            // Use memoization to cache the factory
            createXMLHTTPObject = XMLHttpFactories[i];
            return xmlhttp;
        } catch (e) {
        }
    }
}

/**
 * @return the text from a given URL
 */
function ajax(url) {
    var req = createXMLHTTPObject();
    if (req) {
        try {
            req.open('GET', url, false);
            req.send(null);
            return req.responseText;
        } catch (e) {
        }
    }
    return '';
}

Це ... здається, саме для XHR, а не для завантаження файлів? Я не бачу тут актуальності.
Марк Амерді

0

Я пропоную вам скористатися подією mousedown, яку називають ДО події натискання. Таким чином, браузер природним чином обробляє подію натискання, що дозволяє уникнути будь-якої дивацтва коду:

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a#someID").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

Відмінне рішення від Корбачо, я просто адаптувався позбутися вар

function downloadURL(url) {
    if( $('#idown').length ){
        $('#idown').attr('src',url);
    }else{
        $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
    }
}

0

Тестовані Firefox та Chrome:

var link = document.createElement('a');
link.download = 'fileName.ext'
link.href = 'http://down.serv/file.ext';

// Because firefox not executing the .click() well
// We need to create mouse event initialization.
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click", true, true);

link.dispatchEvent(clickEvent);

Це насправді «хромоване» рішення для firefox (я не тестую його в інших браузерах, тому, будь ласка, залишайте коментарі щодо компіляції)


0

Є так багато дрібниць, які можуть статися при спробі завантажити файл. Невідповідність між одними браузерами - це кошмар. Я закінчив користуватися цією великою маленькою бібліотекою. https://github.com/rndme/download

Приємно в тому, що його гнучкість не тільки для URL-адрес, але і для клієнтських даних, які ви хочете завантажити.

  1. текстовий рядок
  2. текстові даніURL
  3. текст краплі
  4. текстові масиви
  5. HTML-рядок
  6. html blob
  7. зворотний виклик Ajax
  8. двійкові файли

-1

Використовуючи тег якоря та PHP це можна зробити, перевірте цю відповідь

Заклик JQuery Ajax для завантаження файлу PDF

HTML
    <a href="www.example.com/download_file.php?file_source=example.pdf">Download pdf here</a>

PHP
<?php
$fullPath = $_GET['fileSource'];
if($fullPath) {
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);
    switch ($ext) {
        case "pdf":
        header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
        header("Content-type: application/pdf"); // add here more headers for diff. extensions
        break;
        default;
        header("Content-type: application/octet-stream");
        header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
    }
    if($fsize) {//checking if file size exist
      header("Content-length: $fsize");
    }
    readfile($fullPath);
    exit;
}
?>

Я перевіряю розмір файлу, тому що якщо ви завантажуєте pdf з CDN cloudfront, ви не отримаєте розмір документа, який змушує завантажувати документ у 0 кб. Щоб уникнути цього, я перевіряю цю умову

 if($fsize) {//checking if file size exist
      header("Content-length: $fsize");
    }

-1

Я знаю, що я спізнююсь на вечірку, але я хотів би поділитися своїм рішенням, яке є варіантом рішення Imagine Breaker вище. Я намагався використати його рішення, тому що його рішення видається мені найпростішим і легким. Але, як і інші кажуть, для деяких браузерів це не спрацювало, тому я застосував певні варіанти, використовуючи jquery.

Сподіваюся, це може допомогти комусь там.

function download(url) {
  var link = document.createElement("a");
  $(link).click(function(e) {
    e.preventDefault();
    window.location.href = url;
  });
  $(link).click();
}

Весь цей функціональний орган є лише надскладним способом виконання window.location.href = url. Створене вами посилання не використовується ні для чого.
Марк Амерді

-1

Примітка. Не підтримується у всіх браузерах.

Я шукав спосіб завантажити файл за допомогою jquery без необхідності встановлювати URL-адресу файлу в атрибуті href з самого початку.

jQuery('<a/>', {
    id: 'downloadFile',
    href: 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png',
    style: 'display:hidden;',
    download: ''
}).appendTo('body');

$("#downloadFile")[0].click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


-1

Я використовую рішення @ rakaloof без JQuery (тому що вам тут це не потрібно ). Дякую за ідею! Ось форма на основі форми vanillaJS:

const uri = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav';
let form = document.createElement("form");
form.setAttribute('action', uri);
document.body.appendChild(form);
form.submit();
document.body.removeChild(document.body.lastElementChild);

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.