Вопрос по javascript – Самый простой способ открыть окно загрузки без перехода со страницы

97

Каков лучший межбраузерный способ открыть диалог загрузки (допустим, мы можем установить удаление содержимого: вложение в заголовках) без перехода от текущей страницы или открытия всплывающих окон, что не очень хорошо работает в IE6.

Ваш Ответ

12   ответов
78

7 лет прошло, ок. работает ли он для IE6, но это вызывает OpenFileDialog в FF и Chrome.

var file_path = 'host/path/file.ext';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
@ user1933131 хром удаляет только для перекрестного происхождения
@Manoj Rana - я проверил на FF 58.0.2 (64-бит), он работает. Он не будет работать на любом FF, если вы удалите 2 строкиdocument.body.appendChild(a); document.body.removeChild(a);
это больше не работаетdevelopers.google.com/web/updates/2018/02/…
, но тег будет все больше и больше, так как я могу проверить, что загрузка завершена?
Сначала спасибо вам за это решение, но я обнаружил ошибку, если removeChild (a) zip разархивирует ошибку, если zip сломан, поэтому удалите этот код, чтобы решить ее
0

Таким образом, вам не придется беспокоиться о закрытии всплывающего окна.

7

7 years and 9 months ago но многие опубликованные решения, похоже, не работают, например, с использованием<iframe> работает только сFireFox и не работает сChrome.

Best solution:

Лучшееworking solution открыть всплывающее окно загрузки файла вJavaScript это использоватьHTML элемент ссылки,with no need to append the link element to the document.body как указано в других ответах.

Вы можете использовать следующую функцию:

function downloadFile(filePath){
    var link=document.createElement('a');
    link.href = filePath;
    link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
    link.click();
}

В моем приложении я использую его следующим образом:

downloadFile('report/xls/myCustomReport.xlsx');

Working Demo:

function downloadFile(filePath) {
  var link = document.createElement('a');
  link.href = filePath;
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}

downloadFile("http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf");

Note:

You have to use the link.download attribute so the browser doesn't open the file in a new tab and fires the download pop-up. This was tested with several file types (docx, xlsx, png, pdf, ...).
@ManojRana Для Firefox, вы можете использоватьiframe увидетьthis answer.
@Ctrl_Alt_Defeat Ну, в этом случае будет нелегко отследить процесс загрузки, но один трюк может быть показать эту анимацию GIF наlink нажмите и скройте его по истечении времени ожидания, используя этот код:link.onclick = function() { document.body.innerText = "The file is being downloaded ..."; setTimeout(function() { document.body.innerText = ""; }, 2000); }Вы можете видеть это работаетin this fiddle, но имейте в виду, что это не рекомендуемый способ сделать это, было бы лучше обрабатывать, если бы мы использовалиAjax.
это не работает в Firefox. как скачать в firefox?
Как лучше всего отобразить загрузочный GIF, пока файл не загрузится?
1

Blob API файла объекта-URL:

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see https://stackoverflow.com/questions/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
*/
var saveBlobAsFile = function(fileName,fileContents) {
    if(typeof(Blob)!='undefined') { // using Blob
        var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else {
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
}//saveBlobAsFile

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see https://stackoverflow.com/questions/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
 */
var saveBlobAsFile = function(fileName, fileContents) {
  if (typeof(Blob) != 'undefined') { // using Blob
    var textFileAsBlob = new Blob([fileContents], {
      type: 'text/plain'
    });
    var downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    if (window.webkitURL != null) {
      downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
      downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
      downloadLink.onclick = document.body.removeChild(event.target);
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
    }
    downloadLink.click();
  } else {
    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.onclick = document.body.removeChild(event.target);
    pp.click();
  }
} //saveBlobAsFile

var jsonObject = {
  "name": "John",
  "age": 31,
  "city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";

saveBlobAsFile(fileName, fileContents)

13

зки файла, как предполагает этот вопрос. Однако эти ответы не были полезны. Затем я провел тестирование xbrowser и обнаружил, что iframe лучше всего работает во всех современных браузерах IE & gt; 8.

downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe"); 
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText"); 
document.body.appendChild(downloadFrame); 

class="screenReaderText" мой класс для стиля контента, который присутствует, но не доступен для просмотра.

CSS:

.screenReaderText { 
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}

так же, как .visuallyHidden в html5boilerplate

Я предпочитаю это методу javascript window.open, потому что, если ссылка не работает, метод iframe просто не делает ничего, а не перенаправляет на пустую страницу, говоря, что файл не может быть открыт.

window.open(downloadUrl, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
window.focus();
0

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

Working in Chrome, Safari and Firefox

function ajaxDownload(url, filename = 'file', method = 'get', data = {}, callbackSuccess = () => {}, callbackFail = () => {}) {
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            // create link element
            let a = document.createElement('a'), 
                url = window.URL.createObjectURL(data);

            // initialize 
            a.href = url;
            a.download = filename;

            // append element to the body, 
            // a must, due to Firefox
            document.body.appendChild(a);

            // trigger download
            a.click();

            // delay a bit deletion of the element
            setTimeout(function(){
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            }, 100);

            // invoke callback if any 
            callbackSuccess(data);
        },
        error: function (err) {
            // invoke fail callback if any
            callbackFail(err)
        }
    });
5

просто назначьте window.location.href.

Однако иногда ссылка недействительна, и необходим iFrame.

Сделайте ваш обычный event.preventDefault, чтобы предотвратить открытие окна, и если вы используете jQuery, это будет работать:

$('<iframe>').attr('src', downloadThing.attr('href')).appendTo('body').on("load", function() {
   $(this).remove();
});
21

_blank & quot; на ссылку для скачивания. Откроется новое окно, но как только пользователь нажмет кнопку «Сохранить», новое окно закроется.

Это лучший ответ. В Internet Explorer добавление «цели =» _blank »& quot; ссылка, которая должна быть загружена, остановит браузер от перехода (где напечатано «HTML1300: навигация произошла») и, таким образом, может оставить страницу в несогласованном состоянии.
16

url var к URL-адресу загружаемого файла:

<script type="text/javascript">  
function startDownload()  
{  
     var url='http://server/folder/file.ext';    
     window.open(url, 'Download');  
}  
</script>

Затем поместите это в тело, которое начнет загрузку автоматически через 5 секунд:

<script type="text/javascript">  
setTimeout('startDownload()', 5000); //starts download after 5 seconds  
</script> 

(ОтВот.)

это не работает, потому что в IE6, если пользователь нажимает кнопку «Сохранить» файл сохранен, но всплывающее окно остается открытым. Это не приемлемо. mkoryak
этот код не работает в сафари, можете ли вы помочь мне решить в сафари, пожалуйста.
179

window.location.assign(url);
Это приводит к разрыву соединения WebSocket.
это то же самое, что и для window.open (url, «_self»), если URL предназначен для страницы загрузки.
При использовании IE11 я обнаружил, что это привело к остановке JS. Поэтому для IE 11 я использовал window.open (url, «_blank»), который открывал другую вкладку, однако эта вкладка закрывалась, когда он получал файл для загрузки. Это продолжало работать JS.
Это то же самое, что и window.location = url; & # x201C; Всякий раз, когда объекту местоположения назначается новое значение, документ загружается с использованием URL-адреса, как если бы window.location.assign () вызывался с измененным URL-адресом & # x201D; -developer.mozilla.org/en-US/docs/Web/API/window.location
Я использовал то же решение, но он открывает файл на той же вкладке, а не открывает диалог загрузки.
3

особенно если у вас есть постоянное соединение, такое как websocket. Поэтому я всегда прибегаю к старому доброму решению iframe.

HTML

<input type="button" onclick="downloadButtonClicked()" value="Download"/>
...
...
...
<iframe style="display:none;" name="hiddenIframe" id="hiddenIframe"></iframe>

Javascript

function downloadButtonClicked() {
    // Simulate a link click
    var url = 'your_download_url_here';
    var elem = document.createElement('a');
    elem.href = url;
    elem.target = 'hiddenIframe';
    elem.click();
}
0

<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">

Этот способ работает во всех браузерах (я думаю) и позволяет поместить сообщение, подобное: & quot; Если загрузка не начинается через пять секунд, нажмите здесь. & Quot;

Если вам нужно, чтобы это было с JavaScript, ну ...

document.write('<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">');

С уважением

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