两学一做纪实评价系统网站,哪些网站是用asp.net做的,c2c网站网址,网站空间 价格一、download属性是个什么#xff1f;如果我们想实现点击上面的下载按钮下载一张图片#xff0c;你会如何实现#xff1f;我们可能会想到一个最简单的方法#xff0c;就是直接按钮a标签链接一张图片#xff0c;类似下面这样#xff1a;下载但是#xff0c;想法虽好…一、download属性是个什么如果我们想实现点击上面的下载按钮下载一张图片你会如何实现我们可能会想到一个最简单的方法就是直接按钮a标签链接一张图片类似下面这样下载但是想法虽好实际效果却不是我们想要的因为浏览器可以直接浏览图片因此我们点击“下载”链接并是不下载图片而是在新窗口直接浏览图片。于是基本上目前的实现都是放弃HTML策略而是使用例如php这样的后端语言通过告知浏览器header信息来实现下载。header(Content-type: image/jpeg);header(Content-Disposition: attachment; filenamedownload.jpg);然而这种前后端都要操心的方式神烦现在都流行前后端分离还搅在一起太累了感觉不会再爱了。那有没有什么只需要前端动动指头就能实现下载的方式呢有就是本文要介绍的download属性。例如我们希望点击“下载”链接下载图片而不是浏览直接增加一个download属性就可以下载没错你没有看错就这么结束了结果在Chrome浏览器下(FireFox浏览器因为跨域限制无效)不仅如此我们还可以指定下载图片的文件名下载如果后缀名一样我们还可以缺省直接文件名下载截图为虚操作为实Chrome下的截图效果示意一个大写的酷里二、浏览器兼容性和跨域策略然而caniuse展示的兼容性只是个笼统根据鄙人的实地测试事情要比看到的复杂。主要表现在跨域策略的处理上由于我手上没有IE13所以只能对比Chrome浏览器和FireFox浏览器如果需要下载的资源是跨域的包括跨子域在Chrome浏览器下使用download属性是可以下载的但是并不能重置下载的文件的命名而FireFox浏览器下则download属性是无效的也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。而如果资源是同域名的则两个浏览器都是畅通无阻的下载不会出现下载变浏览的情况。是否支持download属性的监测要监测当前浏览器是否支持download属性一行JS代码就可以了如下var isSupportDownload download in document.createElement(a);三、结束语除了图片资源我们还可以是PDF资源或者txt资源等等。尤其Chrome等浏览器可以直接打开PDF文件使得此文件格式需要download处理的场景越来越普遍。此HTML属性虽然非常实用和方便但是兼容性制约了我们的大规模应用。
