vue+elementUI在超链接download属性失效的情况下实现点击链接下载文件,
时间: 2024-05-11 10:13:58 浏览: 108
可以通过使用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中实现点击链接下载文件了。
阅读全文