jquery: how to set download attribute

Question

I am trying to set the download attribute on a link tag using jquery. In general I am using

<a type="button" id="pdf_modal_button" class="btn btn-primary" href="/download/x.pdf" download target="_blank">Download</a>

which downloads the pdf fine.

The problem arises when I generate a link:

<a type="button" id="pdf_modal_button" class="btn btn-primary" href=/download/>Download</a>

and then try to update the link with jquery:

    var _href = $('#pdf_modal_button').attr("href");
    $('#pdf_modal_button').attr("href", _href + '/x.pdf')
    $('#pdf_modal_button').attr("download", true)
    $('#pdf_modal_button').attr("target", "_blank")

it alters the link to download="true"

<a type="button" id="pdf_modal_button" class="btn btn-primary" href="/download/x.pdf" download="true" target="_blank">Download</a>

This causes the browser to open the pdf in a new tab and displays it, instead of just downloading.

Question is, how do I get it to just have a download attribute, and not download="true"

Setting the url in the download attribute doesn't work either.

score 0 · Answer 1 · answered May 09 '18 at 00:30

0

You're setting it to true when you call

$('#pdf_modal_button').attr("download", true)

Try replacing true with the download link

$('#pdf_modal_button').attr("download", "x.pdf")

answered May 09 '18 at 00:30

jake.toString

82
9

devops to dev · Accepted Answer · 2018-05-09T00:36:15.827

0

It seems like an empty string is what I wanted, figured it out from copying the element through chromium.

var _href = $('#pdf_modal_button').attr("href");
$('#pdf_modal_button').attr("href", _href + '/x.pdf')
$('#pdf_modal_button').attr("download", "")
$('#pdf_modal_button').attr("target", "_blank")

generates

<a type="button" id="pdf_modal_button" class="btn btn-primary" href="/download/x.pdf" download target="_blank">Download</a>

edited May 09 '18 at 00:36

answered May 09 '18 at 00:34

devops to dev

31
1
7

is this an answer ? – Reborn May 09 '18 at 00:34
it would still open the file in a new window – Reborn May 09 '18 at 00:35
Yes, it opens it in a new window, downloads it, and then closes the window, rather than keeping it open. Setting it to true opens and displays it in a new window. – devops to dev May 09 '18 at 00:38
so you want it to be opened in a new window but then closed after it downloads? if that is it then its ok. – Reborn May 09 '18 at 00:39

jquery: how to set download attribute

2 Answers2