Cách dễ nhất để mở cửa sổ tải xuống mà không cần điều hướng khỏi trang

Cách tốt nhất trên nhiều trình duyệt để mở hộp thoại tải xuống (giả sử chúng ta có thể đặt content-disposion: file đính kèm trong tiêu đề) mà không cần điều hướng khỏi trang hiện tại hoặc mở cửa sổ bật lên, cách này không hoạt động tốt trong Internet Explorer (IE ) 6.

Đã 7 năm trôi qua và tôi không biết liệu nó có hoạt động với IE6 hay không, nhưng điều này nhắc nhở OpenFileDialog trong FF và 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 này rất hay là nó không mở ra một cửa sổ hoặc tab mới.

window.location.assign(url);

Tôi luôn thêm target = "_ blank" vào liên kết tải xuống. Thao tác này sẽ mở ra một cửa sổ mới, nhưng ngay sau khi người dùng nhấp vào lưu, cửa sổ mới sẽ bị đóng lại.

Đặt cái này vào phần đầu HTML, đặt urlvar thành URL của tệp sẽ được tải xuống:

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

Sau đó đặt cái này vào phần thân, quá trình này sẽ tự động bắt đầu tải xuống sau 5 giây:

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

(Từ đây .)

Tôi biết câu hỏi đã được đặt ra 7 years and 9 months agonhưng nhiều giải pháp đã đăng dường như không hoạt động, chẳng hạn như sử dụng một giải pháp <iframe>chỉ hoạt động với FireFoxvà không hoạt động với Chrome.

Giải pháp tốt nhất:

Giải pháp hoạt động tốt nhất để mở cửa sổ bật lên tải xuống tệp JavaScriptlà sử dụng HTMLphần tử liên kết, không cần nối phần tử liên kết vàodocument.body như đã nêu trong các câu trả lời khác.

Bạn có thể sử dụng chức năng sau:

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

Trong ứng dụng của tôi, tôi đang sử dụng nó theo cách này:

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

Demo làm việc:

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

Ghi chú:

• Bạn phải sử dụng link.downloadthuộc tính để trình duyệt không mở tệp trong tab mới và kích hoạt cửa sổ bật lên tải xuống.
• Điều này đã được thử nghiệm với một số loại tệp (docx, xlsx, png, pdf, ...).

Tôi đang tìm một cách hay để sử dụng javascript để bắt đầu tải xuống tệp, giống như câu hỏi này gợi ý. Tuy nhiên những câu trả lời này không hữu ích. Sau đó, tôi đã thực hiện một số thử nghiệm xbrowser và nhận thấy rằng iframe hoạt động tốt nhất trên tất cả các trình duyệt hiện đại 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" là lớp của tôi để tạo kiểu cho nội dung hiện có nhưng không thể xem được.

css:

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

giống như .vis VisualHidden trong html5boilerplate

Tôi thích điều này hơn phương thức window.open của javascript vì nếu liên kết bị hỏng, phương thức iframe chỉ đơn giản là không làm bất cứ điều gì trái ngược với việc chuyển hướng đến một trang trống nói rằng không thể mở tệp.

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

Sử dụng API tệp URL đối tượng HTML5 Blob :

/**
 * 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)

Việc sửa đổi vị trí của cửa sổ có thể gây ra một số vấn đề, đặc biệt là khi bạn có kết nối liên tục như websocket. Vì vậy, tôi luôn sử dụng giải pháp iframe cũ tốt.

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();
}

Nếu liên kết đến một url tệp hợp lệ, chỉ cần gán window.location.href sẽ hoạt động.

Tuy nhiên, đôi khi liên kết không hợp lệ và cần phải có iFrame.

Thực hiện event.preventDefault bình thường của bạn để ngăn cửa sổ mở và nếu bạn đang sử dụng jQuery, điều này sẽ hoạt động:

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

Sau nhiều giờ cố gắng, hàm được sinh ra :) Tôi đã gặp một tình huống mà tôi phải hiển thị trình tải kịp thời trong khi tệp đang chuẩn bị tải xuống:

Làm việc trong Chrome, Safari và 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)
        }
    });

Làm thế nào về:

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

Cách này hoạt động trên tất cả các trình duyệt (tôi nghĩ) và cho phép bạn đặt một thông báo như: "Nếu quá trình tải xuống không bắt đầu sau năm giây, hãy nhấp vào đây."

Nếu bạn cần nó với javascript .. thì ...

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

Trân trọng

Một iframe nhỏ / ẩn có thể hoạt động cho mục đích này.

Bằng cách đó, bạn không phải lo lắng về việc đóng cửa sổ bật lên.