Cara termudah untuk membuka jendela unduhan tanpa keluar dari halaman

Apa cara terbaik lintas browser untuk membuka dialog unduhan (anggap saja kita dapat menyetel disposisi konten: lampiran di tajuk) tanpa keluar dari laman saat ini, atau membuka munculan, yang tidak berfungsi dengan baik di Internet Explorer (IE ) 6.

7 tahun telah berlalu dan saya tidak tahu apakah ini berfungsi untuk IE6 atau tidak, tetapi ini meminta OpenFileDialog di FF dan 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 ini bagus karena tidak membuka jendela atau tab baru.

window.location.assign(url);

Saya selalu menambahkan target = "_ blank" ke tautan unduhan. Ini akan membuka jendela baru, tetapi segera setelah pengguna mengklik simpan, jendela baru ditutup.

Letakkan ini di bagian head HTML, atur urlvar ke URL file yang akan diunduh:

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

Kemudian masukkan ini ke dalam body, yang akan memulai pengunduhan secara otomatis setelah 5 detik:

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

(Dari sini .)

Saya tahu pertanyaan itu telah diajukan 7 years and 9 months agotetapi banyak solusi yang diposting tampaknya tidak berfungsi, misalnya menggunakan <iframe>karya hanya dengan FireFoxdan tidak berfungsi Chrome.

Solusi terbaik:

Solusi kerja terbaik untuk membuka pop-up unduhan file JavaScriptadalah dengan menggunakan HTMLelemen tautan, tanpa perlu menambahkan elemen tautan kedocument.body seperti yang dinyatakan dalam jawaban lain.

Anda dapat menggunakan fungsi berikut:

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

Dalam aplikasi saya, saya menggunakannya dengan cara ini:

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

Demo Kerja:

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

catatan:

• Anda harus menggunakan link.downloadatribut agar browser tidak membuka file di tab baru dan mengaktifkan pop-up unduhan.
• Ini telah diuji dengan beberapa jenis file (docx, xlsx, png, pdf, ...).

Saya telah mencari cara yang baik untuk menggunakan javascript untuk memulai pengunduhan file, seperti yang disarankan pertanyaan ini. Namun jawaban ini tidak membantu. Saya kemudian melakukan beberapa pengujian xbrowser dan menemukan bahwa iframe berfungsi paling baik di semua browser modern 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" adalah kelas saya untuk mengatur gaya konten yang ada tetapi tidak dapat dilihat.

css:

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

sama seperti .visuallyHidden di html5boilerplate

Saya lebih suka ini daripada metode javascript window.open karena jika tautannya rusak, metode iframe tidak melakukan apa-apa sebagai lawan mengarahkan ke halaman kosong yang mengatakan file tidak dapat dibuka.

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

Menggunakan API File URL Objek Blob HTML5 :

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

Mengubah lokasi jendela dapat menyebabkan beberapa masalah terutama saat Anda memiliki koneksi yang terus-menerus seperti websocket. Jadi saya selalu menggunakan solusi iframe lama yang bagus.

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

Jika tautannya ke url file yang valid, cukup menetapkan window.location.href akan berfungsi.

Namun, terkadang tautan tersebut tidak valid, dan diperlukan iFrame.

Lakukan event.preventDefault normal Anda untuk mencegah jendela terbuka, dan jika Anda menggunakan jQuery, ini akan berfungsi:

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

Setelah berjam-jam mencoba, fungsinya lahir :) Saya punya skenario di mana saya harus menampilkan loader tepat waktu ketika file sedang bersiap untuk diunduh:

Bekerja di Chrome, Safari, dan 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)
        }
    });

Bagaimana tentang:

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

Cara ini bekerja pada semua browser (menurut saya) dan membiarkan Anda meletakkan pesan seperti: "Jika unduhan tidak dimulai dalam lima detik, klik di sini."

Jika Anda membutuhkannya harus dengan javascript .. nah ...

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

Salam

Iframe kecil / tersembunyi dapat berfungsi untuk tujuan ini.

Dengan begitu Anda tidak perlu khawatir akan menutup pop up.