jQuery: extract file name from an href link when adding "download" attribute

Question

I am using generated html that contains a link to a file with the .dxf suffix:

<a href="http://example.com/filetodownload.dxf">Download File</a>

Since I can't change the dynamically created html, I'm using this to add the download attribute to those href links:

jQuery('a[href*=".dxf"]').each(function() {
jQuery("a").attr("download", "downloadedfile.dxf");
});

This forces the browser to open a "download and save" dialogue.

The problem is that I want the download attribute to have the name of the file in the link, i.e. filetodownload.dxf and not the default downloadedfile.dxf in the jQuery function.

How can I get jQuery to use the real file name? Can I call a variable that is the actual file name? How do I extract the file name from the link?

I don't want a box on the page to name the downloaded file, like Custom download name with Javascript or JQuery

I can't get the file name from the URL in the browser, since the file is a html download link, not a URL, like js function to get filename from url

""I can't get the file name from the URL, since th file is a download link, not a URL" — That doesn't make sense. The `href` attribute **must** be a URL A link is just a thing you click on to navigate to something at a URL. — Quentin, Jul 08 '20 at 16:45

score 2 · Answer 1 · answered Jul 08 '20 at 16:49

2

You can do this:

jQuery('a[href*=.dxf]').each(function () {
    $(this).attr("download", this.href.split("/").pop().split("#")[0].split("?")[0]);
});

Got the splitter from here.

answered Jul 08 '20 at 16:49

sit

360
3
9

Thanks, but see amphetamachine's answer for the issue with each. – BlueDogRanch Jul 08 '20 at 17:30
@BlueDogRanch Actually this will work just fine too; `$(this)` refers to the element for that iteration. – amphetamachine Jul 08 '20 at 17:34

amphetamachine · Accepted Answer · 2020-07-08T21:57:39.050

Calling jQuery("a").attr("download", "downloadedfile.dxf"); in a .each() updates ALL the elements' download attribute multiple times, not just the one you're trying to update.

You'll have to pass in the element into your .each callback, or use $(this) to keep refer to the "current" element in the collection you're iterating over.

jQuery('a[href*=".dxf"]').each(function(i, $elem) {
    var pathname;
    if (typeof URL !== 'undefined') {
        var url = new URL($elem.attr('href'));
        // Note: Using URL.pathname strips off the #hash and ?foo=bar arguments
        // e.g. 'https://example.com/foo/bar/baz.xls?id=2&a=b#hash'
        //   -> 'baz.xls'
        pathname = url.pathname.split('/').pop();
    } else {
        // must be IE11 or older (~1.38% user share as of 2020-07-08)
        pathname = $elem.attr('href');
    }
    var filename = pathname.split('/').pop();
    $elem.attr("download", filename);
});

Note: The URL class isn't supported in IE 11 or older.

That's interesting about IE 11; do kmoser or Тимофей's answers support IE11 and older? — BlueDogRanch, Jul 08 '20 at 18:01

score 1 · Answer 3 · answered Jul 08 '20 at 16:51

1

For each <a> tag, use a regexp to extract the filename in the href attribute and set the download value to that:

jQuery('a[href*=".dxf"]').each(function() {
    let url = $(this).attr('href');
    let filename = url.split('/').pop() // https://stackoverflow.com/a/17143667/378779
    console.log(filename);
    $(this).attr("download", filename);
});

answered Jul 08 '20 at 16:51

kmoser

8,780
3
24
40

Thanks, but see amphetamachine's answer for the issue with each. – BlueDogRanch Jul 08 '20 at 17:30
@BlueDogRanch Actually this works just fine because they used `$(this)`. – amphetamachine Jul 08 '20 at 17:44

score 0 · Answer 4 · answered Jul 08 '20 at 16:52

0

I hope I am understanding you correctly, but this should work:

jQuery('a[href*=".dxf"]').each(function() {
    jQuery("a").attr("download", jQuery(this).attr('href').split('/').pop());
});

answered Jul 08 '20 at 16:52

Ivan DaGreat

46
4

Thanks, but see amphetamachine's answer for the issue with each. – BlueDogRanch Jul 08 '20 at 17:30

jQuery: extract file name from an href link when adding "download" attribute

4 Answers4