一、a标签download属性
a标签download属性是一个HTML5新增的属性,可以让用户在点击链接时下载所链接的资源,而不是在浏览器中打开它。然而,有些情况下,a标签download属性会失效,这个问题在很多场景下都会遇到。
二、a标签的download属性仅适用于
a标签download属性仅适用于同域(同源)的资源,如果要下载跨域资源,则需要使用服务器端脚本来处理。
例如:
Download PDF Download PDF
在这两个链接中,第一个是有效的,因为它下载的是同域下的资源。第二个链接会失败,因为它尝试下载跨域资源。
三、a标签中的download属性
a标签中的download属性只对超链接生效,对于通过JavaScript创建的Blob URL或者data URL是不起作用的。这种情况下,我们可以使用JavaScript来模拟下载行为。
例如:
const downloadFile = (blob, fileName) => { const link = document.createElement("a"); link.href = window.URL.createObjectURL(new Blob([blob], { type: "application/octet-stream" })); link.download = fileName; link.click(); };
这个函数接收两个参数:要下载的数据blob和文件名fileName。它创建了一个临时的链接,并为其设置了对象URL作为链接的href属性。然后将文件名设置为download属性,以便浏览器自动启动下载。
四、a标签download属性只能同源
同源策略是浏览器的安全策略,它要求JavaScript只能与同域页面进行交互。同样的,download属性只适用于同源资源。如果需要下载跨域资源,我们可以使用服务器端脚本或者CORS策略来处理。
五、设置width属性对什么标签无效
设置width属性对于a标签是无效的。width属性只适用于图像、表格和表单元素。
总结
a标签download属性可以让用户轻松地下载链接资源,但是在某些情况下会失效。对于这种情况,我们需要使用JavaScript来模拟下载行为或者在服务器端进行处理。同时,我们要注意a标签download属性只适用于同源资源,并且设置width属性对于a标签是无效的。