vue实现点击下载文件,vue如何实现文件下载
本文主要介绍Vue中点击url下载文件案例的详细说明。这篇文章需要注意的是，如果一个文件的url是跨域的，那么下载可能会失败，因为fetch请求连接后，因为跨域而无法获取资源，所以无法进行后续操作，此时就是失败。详情请跟随边肖。
目录
代码实现使用注释封装自定义指令将url变为粗体，并在创建标记后下载blob。
代码实现
在src下的directive文件夹下创建一个新目录downLoadUrl。
下载Url/index.js文件
/*
*后端返回文件的url，前端创建一个A标签下载。
*
* 1.解决了如果文件是浏览器支持的图片或格式类型，点击下载会直接打开文件，
* 2.下载文件时，浏览器会出现闪烁问题。
*
*在页面上使用
* 1.从 @/directive/down-load-URL 导入下载
* 2.注册指令指令：{downLoad}
* 3.使用，以说明的形式在按钮上下载使用。例如：El-button v-downLoad= URL downLoad/El-button
*/
从导入下载。/下载
const install=function(Vue) {
Vue.directive(downLoadUrl ，下载)
}
下载。安装=安装
导出默认下载
DownLoadUrl/downLoad.js文件
导出默认值{
bind(el，binding) {
if (binding.value.url) {
el.addEventListener(click ，()={
const a=document . createelement( a )
//let URL=baseURLbinding.value//If URL不完整，需要拼接baseurl。
Const url=binding.value.url //直接使用完整的url
//这里是把url转换成blob地址，
获取(URL)。然后(res=res.blob())。然后(blob={//将链接地址字符内容转换成blob地址。
a . href=URL . createobjecturl(blob)
console.log(a.href)
A.download=binding . value . name //下载文件的名称
//a . download=URL . split(/)[URL . split(/)。length-1]///下载文件的名称
document.body.appendChild(a)
a .单击()
//资源下载完成后，清除占用的缓存资源。
窗户。URL . revokeobjecturl(a . href)；
document . body . remove child(a)；
})
})
}
}
}
在main.js中注册自定义指令
使用
返回一个对象{url: ，名称： }
注意
1.如果文件的url是跨域的，下载可能会失败，因为fetch请求连接后，因为跨域而无法获取资源，所以无法进行后续操作，这就是失败。
2.也可以设置浏览器。获取pdf、图片等资源。不要直接打开，直接下载，然后简单的创建一个A标签就可以下载了。
关于vue中点击url下载文件的这篇文章到此为止——一个案例。有关在Vue中点击url下载文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。