jq 之 download下载图片或文件功能，以及一个神奇的download属性！

最新推荐文章于 2024-08-10 07:08:28 发布

干了这碗小米汤儿

最新推荐文章于 2024-08-10 07:08:28 发布

阅读量8.4k

点赞数

分类专栏： vue 文章标签： jq download下载功能 download属性 vue download下载功能 window.open()

本文链接：https://blog.youkuaiyun.com/MtangEr/article/details/84562478

版权

vue 专栏收录该内容

44 篇文章

订阅专栏

在一个项目中很常见的一个效果就是下载图片、文件功能，下边就介绍两种方法

1.用jq写下载的方法

//html中代码如下
<div>
	<p>点击图片可下载</p>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543890538&di=b54e3bf81971467f57fd5bb39f493f65&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.qqoi.cn%2Fimg_star%2F181240813.jpeg" alt="" id="download" style="width:260px;height:350px;">
</div>
//JQ代码如下：
$('#download').click(function(){
    var url = $(this).attr('src')
    window.open(url)
})

用这种方法的时候会有一个问题，就是如果你下载的是一个图片类型的文件，如jpg，png等等，不同的浏览器会有不同的处理方式，谷歌浏览器就会新开一个窗口展示此图片，如想接着下载，自行点右键保存文件~，

还有的小伙伴会用到 window.location(url), 这种方式遇到的问题就是不会新打开窗口，直接在原窗口展示图片。所以更偏离下载图片的一个功能，不太符合我们原本想要的效果；

再此，再点明一点：在使用vue框架编程序的时候用到下载方法，有的会提示
window.open() 方法找不到或者未定义。原因是 open方法已经被占用。可能你又会说，我并没用到过open方法呀~。但是冥冥中再某个角落 open方法确实已经被占用了！所以解决办法就是：

<div>
	<p @click="download(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543295819912&di=d20e2ca20b50b6dbd58ffae574891dc8&imgtype=0&src=http%3A%2F%2Fc2.haibao.cn%2Fimg%2F0_0_100_1%2F1531134422.2724%2F41280bcc8cd59bbf813af0e29fb06bb2.jpg)">下载</p>
</div>
//JQ代码如下：
methods:{
	download(url){
		var open = " "  //先声明open 为 “”，，这样window.open()方法就能找到并下载。
		window.open(url)
	}
}

另外：.pdf 、 .doc 等类型的文件（即除了图片类型的文件），可直接实现下载效果，不存在新窗口直接打开的文件；

方法2.这里介绍一个好用的download属性来实现下载功能

在a 标签中添加download属性，即：<a href="url" download></a>
注意：download 属性必须在a标签中才可以使用。其他标签中使用无效；
优点就是：
比如 .jpg .png这样的相对路径的图片文件，浏览器直接就可以下载，并不是先在新窗口打开图片了，这样也就解决了方法1中存在的问题。
一个浏览器兼容问题：
参考链接：https://blog.youkuaiyun.com/p312011150/article/details/78928244

但是：只有相对路径的图片是可以直接下载的！网络路径的图片仍然是先打开后自行下载！
网络图片的结果就是在chrome浏览器 frefox,ie浏览器里面直接打开而不是下载，360浏览器,QQ浏览器执行下载。
这个属性存在兼容性问题。

所以，总之！图片或者文件弄成一个压缩包的话，href的地址就算是一个网络地址，但是直接打不开就会执行下载。这也是一个办法。只要是浏览器直接解析不出来的东西都是可以执行下载动作的。

因为通常如果a标签的href属性=‘xxx’，如果xxx可以被浏览器解析，那么xxx就会被页面打开，而不是被下载，只有当浏览器不能解析的时候，那么才会被下载到本地。通常 js, 图片，html等文档均可被解析，MP4,mp3，zip等文件不会被解析。

此处参考：https://blog.youkuaiyun.com/xiaoqiangbigbrother/article/details/8121836

再来一点：Download 属性可以设置一个值
Html5里面的 a标签的 Download 属性可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)，

<a href="https://vuejs.org/images/logo.png" download="vueLogo.png">下载 vue 的 LOGO</a>

通过给 download 添加属性名，就可以直接下载并且重命名为这个文件名了。