Скачать файл с помощью Javascript/jQuery

у меня есть очень похожее требование указано здесь.



мне нужно, чтобы браузер пользователя начать загрузку вручную, когда $('a#someID').click();



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



Я хочу открыть загрузку в новом окне/вкладке. Как такое возможно?
2335   23  

23 ответов:

использовать невидимый <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'});

при нажатии на ссылку, он загружает файл в новой вкладке/окне.

337  
2015-12-02 23:38:15

Я создал jQuery файл скачать плагин (демо) (GitHub), который также может помочь в вашей ситуации. Он работает довольно похоже с iframe, но имеет некоторые интересные функции, которые я нашел довольно удобно:

  • очень легко настроить с хорошими визуальными эффектами (jQuery UI Dialog, но не требуется), все тестируется тоже

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

  • successCallback и failCallback функции позволяют вам быть явным о том, что пользователь видит в любой ситуации

  • в сочетании с jQuery UI разработчик может легко показать модальное сообщение пользователю о том, что происходит загрузка файла, распустить модальное после начала загрузки или даже сообщить пользователю в дружественной форме, что произошла ошибка. Смотрите демо пример этого. Надеюсь, это кому-то поможет!

вот простой пример использования демо с помощью плагина источник с обещаниями. Элемент демо-страницы включает в себя много других, "лучше UX" примеры, а также.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });
136  
2013-05-11 23:46:13 
function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

проверьте, будет ли ваш целевой браузер(ы) выполнять приведенный выше фрагмент кода плавно:
http://caniuse.com/#feat=download

103  
2015-05-20 12:20:27

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

59  
2015-07-07 10:52:51

Я рекомендую использовать html5 для загрузки вместо jQuery:

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

это загрузит ваш файл, не открывая его.

40  
2015-08-13 16:19:22

Если вы уже используете 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');
20  
2012-10-15 00:08:12

только семь лет спустя здесь появляется однострочное решение jQuery с использованием формы вместо iframe или ссылки:

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

Я проверил это в

  • Chrome 55
  • Firefox 50
  • Edge 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>
10  
2017-01-18 12:07:51

работает на Chrome, Firefox и IE8 и выше. 

var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();
9  
2016-05-04 13:49:48

простой пример использования 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');

8  
2016-08-27 03:35:40

наиболее полный и рабочий (проверенный) код для загрузки данных для FireFox, Chrome и IE код следующий. Предположим, что данные находятся в texarea

4  
2018-02-24 10:56:39

Я не знаю, если вопрос просто слишком стар, но установка окна.расположение к 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
2  
2016-07-05 12:41:56

чтобы улучшить ответ 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);
}

другими словами, просто используйте

2  
2017-09-02 13:16:10

ответ, представленный hitesh 30 декабря ' 13 действительно работает. Это просто требует немного регулировки:

PHP-файл может вызвать сам себя. Другими словами, просто создайте файл с именем "сохранить как".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;
            }
        }
    ?>
1  
2014-01-07 19:43:27

Я предлагаю вам использовать событие mousedown, которое вызывается перед событием click. Таким образом, браузер обрабатывает событие click естественным образом, что позволяет избежать каких-либо странностей кода:

(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);
1  
2014-10-18 22:25:45

отличное решение от Корбачо, я просто адаптировался, чтобы избавиться от var

function downloadURL(url) {
    if( $('#idown').length ){
        $('#idown').attr('src',url);
    }else{
        $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
    }
}
1  
2015-06-23 22:44:53

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

на стороне клиента (страница 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();

вы даже можете создавать zip-архивы данных вот так:

<?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);

лучшая часть это не оставляет никаких остаточных файлов на вашем сервере, так как все создается и уничтожается на лету!

1  
2015-12-21 10:14:15

С помощью якорного тега и PHP это можно сделать, проверьте этот ответ

jQuery Ajax call for PDF file download

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, вы не получите размер документа, который заставляет документ загружать в 0kb, чтобы избежать этого, я проверяю это условие

 if($fsize) {//checking if file size exist
      header("Content-length: $fsize");
    }
0  
2017-05-23 14:33:26

эти функции используются в 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 '';
}
0  
2014-04-28 15:58:13

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  
2015-12-16 01:33:16

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

надеюсь, что это может помочь кому-то там.

function download(url) {
  var link = document.createElement("a");
  $(link).click(function(e) {
    e.preventDefault();
    window.location.href = url;
  });
  $(link).click();
}
0  
2016-03-23 08:36:41

Примечание: не поддерживается во всех браузерах.

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

jQuery('<a/>', {
    id: 'downloadFile',
    href: 'http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]',
    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>
0  
2016-04-16 11:14:37

Я использую решение @ 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);
0  
2017-05-23 15:10:54

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

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

В открывшемся окне откройте страницу загрузки, которая автоматически закрывается.

0  
2017-10-02 04:21:28

Comments

    Ничего не найдено.
Click here to cancel reply.