CODEWITHSUNDEEP
javascriptiframe
omriman12
omriman12

Reputation: 1690

Javascript - downloading a file using Iframe and then removing it

What I want to do is:

  1. Append a new iframe to the body and download a file using it.
  2. Remove the iframe once the file is downloaded..

I read a few posts and came up with this code:

let fileHref = baseLocation + '/excelexports/' + fileName;
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = fileHref;
iframe.onload = function() {
    this.parentNode.removeChild(this);    
};
document.body.appendChild(iframe);

The problem is the onload callback is not firing after the file is downloaded...

Upvotes: 0

Views: 22124

Answers (3)

user19360425
user19360425

Reputation: 1

Below code might help someone who is looking to download file using iframe-

with(document){
                ir=createElement('iframe');
                ir.id='ifr';
                ir.location='about.blank';
                ir.style.display='none';
                body.appendChild(ir);
                with(getElementById('ifr').contentWindow.document){
                    open("text/plain", "replace");
                    charset = "utf-8";
                    write("---WELCOME ---");
                   document.charset = "utf-8";
                  popupHtml = 
              document.getElementById('ifr').contentWindow.document.body.innerHTML;;
                    download(filename+'.txt', popupHtml);
}

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Upvotes: 0

Barkermn01
Barkermn01

Reputation: 6822

you could just use the HTML5 download attribute. E.G <a href='{fileurl}' download>download</a> or if you need the javascript engine to do it.

let fileHref = baseLocation + '/excelexports/' + fileName;
var anchor = document.createElement('a');
anchor.setAttribute("download", true);
anchor.setAttribute("href", fileHref);
anchor.click();

If your using a click to run this javascript you can even pass though the event to help identify your download as a user action to more intrusive popup blockers.

someElem.addEventListener('click', function(evt){
    let fileHref = baseLocation + '/excelexports/' + fileName;
    var anchor = document.createElement('a');
    anchor.setAttribute("download", true);
    anchor.setAttribute("href", fileHref);
    anchor.dispatchEvent(evt);
});

source: https://www.w3schools.com/tags/att_a_download.asp

Upvotes: 3

charlietfl
charlietfl

Reputation: 171679

No need to use an iframe at all. Just do a redirect to the download url. The headers in the url will prevent the browser from loading that as a page and therefore not destroying the current page

let fileHref = baseLocation + '/excelexports/' + fileName;
window.location.href  = fileHref ;

Upvotes: 3

Related Questions