vue+elementUI在超链接download属性失效的情况下实现点击链接下载文件,
时间: 2024-05-11 14:13:58 浏览: 19
可以通过使用js来实现点击链接下载文件。
具体实现步骤如下:
1. 在需要下载文件的链接上加上一个自定义的属性,比如“data-url”,用于存储文件的下载链接。
例如:
```html
<el-link :href="javascript:void(0)" data-url="http://example.com/file.pdf">下载文件</el-link>
```
2. 在Vue组件中使用js来实现点击链接下载文件。
例如:
```js
export default {
methods: {
downloadFile(event) {
const url = event.currentTarget.getAttribute('data-url');
const link = document.createElement('a');
link.href = url;
link.download = '';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
```
在以上代码中,首先获取链接中存储的下载链接,然后创建一个a标签,设置href和download属性,然后将该标签添加到body中,再触发click事件进行下载,最后再从body中移除该标签。
3. 将downloadFile方法绑定到链接的@click事件中即可。
例如:
```html
<el-link :href="javascript:void(0)" data-url="http://example.com/file.pdf" @click="downloadFile">下载文件</el-link>
```
这样就可以在Vue ElementUI中实现点击链接下载文件了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)