如何用jQuery设置a标签无值download属性实现PDF下载

首先得明确问题根源：HTML里像download这类布尔属性，只要标签上存在该属性就会生效，不需要赋值（哪怕写了值，浏览器也只判断属性是否存在）。而你用attr("download", true)时，jQuery会把布尔值转成字符串"true"，就出现了download="true"的情况，这不符合浏览器预期的纯属性存在形式，所以才会变成在新标签页打开PDF而非直接下载。

这里给你两种可行的解决方案：

1. 使用prop()方法设置布尔属性 #

jQuery的prop()方法专门处理DOM元素的属性（property），对布尔属性的支持更准确，会直接生成仅含属性名的形式：

var _href = $('#pdf_modal_button').attr("href");
$('#pdf_modal_button').attr("href", _href + '/x.pdf')
// 用prop设置download，正确生成无值属性
$('#pdf_modal_button').prop("download", true)
$('#pdf_modal_button').attr("target", "_blank")

执行后生成的HTML会是：

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

2. 给attr()传入空字符串作为值 #

如果习惯用attr()方法，传入空字符串也能实现无值属性的效果：

var _href = $('#pdf_modal_button').attr("href");
$('#pdf_modal_button').attr("href", _href + '/x.pdf')
// 传入空字符串，生成仅含属性名的download
$('#pdf_modal_button').attr("download", "")
$('#pdf_modal_button').attr("target", "_blank")

补充说明 #

你提到把URL设为download属性值无效，是因为download的作用是可选指定下载后的文件名，如果不填就用URL里的文件名，但它本身的核心作用触发下载，还是依赖属性本身的存在，而非属性值内容。另外要注意，跨域资源的话浏览器可能会忽略download属性，确保你的PDF是同源资源哦。

内容的提问来源于stack exchange，提问作者devops to dev