วิธีที่ง่ายที่สุดในการเปิดหน้าต่างดาวน์โหลดโดยไม่ต้องออกจากหน้า

วิธีใดเป็นวิธีที่ดีที่สุดในการเปิดกล่องโต้ตอบการดาวน์โหลด (สมมติว่าเราสามารถตั้งค่าการจัดการเนื้อหา: ไฟล์แนบในส่วนหัว) โดยไม่ต้องออกจากหน้าปัจจุบันหรือเปิดป๊อปอัปซึ่งทำงานได้ไม่ดีใน 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);

จาวาสคริปต์นี้ดีที่ไม่เปิดหน้าต่างหรือแท็บใหม่

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>เท่านั้นทำงานร่วมกับและไม่ได้ทำงานกับFireFoxChrome

ทางออกที่ดีที่สุด:

วิธีแก้ปัญหาการทำงานที่ดีที่สุดในการเปิดป๊อปอัปดาวน์โหลดไฟล์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, ... )

ฉันกำลังมองหาวิธีที่ดีในการใช้จาวาสคริปต์เพื่อเริ่มการดาวน์โหลดไฟล์ตามที่คำถามนี้แนะนำ อย่างไรก็ตามคำตอบเหล่านี้ไม่เป็นประโยชน์ จากนั้นฉันได้ทำการทดสอบ 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 ใน 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();

การใช้ HTML5 Blob Object-URL File API:

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

การแก้ไขตำแหน่งของหน้าต่างอาจทำให้เกิดปัญหาบางอย่างโดยเฉพาะอย่างยิ่งเมื่อคุณมีการเชื่อมต่อแบบต่อเนื่องเช่น 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();
}

หากลิงก์ไปยัง 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">

วิธีนี้ใช้ได้กับทุกเบราว์เซอร์ (ฉันคิดว่า) และให้คุณใส่ข้อความเช่น: "หากการดาวน์โหลดไม่เริ่มในห้าวินาทีให้คลิกที่นี่"

ถ้าคุณจำเป็นต้องใช้จาวาสคริปต์.. ดี ...

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

ความนับถือ

iframe ขนาดเล็ก / ซ่อนอยู่สามารถทำงานเพื่อจุดประสงค์นี้ได้

ด้วยวิธีนี้คุณไม่ต้องกังวลเกี่ยวกับการปิดป๊อปอัป