Найпростіший спосіб відкрити вікно завантаження, не відходячи від сторінки

Який найкращий спосіб перехресного браузера відкрити діалогове вікно завантаження (припустимо, ми можемо встановити вміст-диспозіція: вкладення у заголовки), не відходячи від поточної сторінки або відкриваючи спливаючі вікна, що не працює добре в Internet Explorer (IE ) 6.

Минуло 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);

Цей javascript хороший тим, що він не відкриває нове вікно чи вкладку.

window.location.assign(url);

Я завжди додаю target = "_ blank" до посилання для завантаження. Це відкриє нове вікно, але як тільки користувач натисне кнопку "Зберегти", нове вікно закриється.

Помістіть це у розділі HTML, встановивши urlvar до 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> 

( Звідси .)

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

Найкраще рішення:

Найкращим робочим рішенням для відкриття спливаючого вікна завантаження файлів JavaScriptє використання HTMLелемента посилання без необхідності додавати елемент посилання до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');

Робоча демонстрація:

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

Примітка:

• Ви повинні використовувати link.download атрибут, щоб браузер не відкривав файл на новій вкладці та запускав спливаюче вікно завантаження.
• Це було перевірено декількома типами файлів (docx, xlsx, png, pdf, ...).

Я шукав хороший спосіб використовувати javascript для ініціювання завантаження файлу, як це підказує це питання. Однак ці відповіді не були корисними. Потім я здійснив тестування xbrowser і виявив, що iframe найкраще працює у всіх сучасних браузерах IE> 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 in 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();

Використання API файлу HTML5 Blob Object-URL:

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see /programming/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 /programming/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)

Змінення місця розташування вікна може спричинити певну проблему, особливо коли у вас є стійке з'єднання, наприклад, веб-розетка. Тому я завжди вдаюся до старого хорошого рішення 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();
}

Якщо посилання на дійсну URL-адресу файлу, просто призначить window.location.href буде працювати.

Однак іноді посилання недійсне, і iFrame потрібен.

Зробіть свій звичайний event.preventDefault, щоб запобігти відкриттю вікна, і якщо ви використовуєте jQuery, це спрацює:

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

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

Працює в Chrome, Safari та 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)
        }
    });

Як щодо:

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

Цей спосіб працює на всіх браузерах (я думаю) і дозволяю вам поставити повідомлення на зразок: "Якщо завантаження не розпочнеться через п’ять секунд, натисніть тут."

Якщо вам потрібно, щоб він був з javascript ... ну ...

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

З повагою

Для цього може працювати невеликий / прихований кадр.

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