用vue写一个下载功能
时间: 2024-03-13 11:42:36 浏览: 20
好的,下面是一个使用Vue.js实现文件下载的示例代码:
```html
<template>
<div>
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile() {
const url = 'your_file_url'; // 替换成您要下载的文件的URL地址
const filename = 'your_file_name'; // 替换成您要下载的文件的文件名
fetch(url).then(response => {
return response.blob();
}).then(blob => {
const a = document.createElement('a');
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
});
}
}
};
</script>
```
在上面的代码中,我们使用了`fetch`函数来获取文件的二进制数据,然后通过`URL.createObjectURL`函数将其转换为一个下载链接,最后通过创建一个`<a>`标签来触发下载操作。您只需要将`your_file_url`和`your_file_name`替换成您要下载的文件的URL地址和文件名即可。
相关推荐
![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)