vue3 下载静态文件
时间: 2024-03-21 22:36:53 浏览: 41
在Vue 3中,下载静态文件可以通过使用`<a>`标签的`download`属性或者使用JavaScript的`fetch` API来实现。
1. 使用`<a>`标签的`download`属性:
在Vue模板中,你可以创建一个`<a>`标签,并设置`href`属性为文件的URL,然后添加`download`属性来指定下载文件的名称。例如:
```html
<a href="/path/to/file.pdf" download="myfile.pdf">点击下载文件</a>
```
当用户点击该链接时,浏览器会自动下载文件,并将其保存为指定的文件名。
2. 使用JavaScript的`fetch` API:
在Vue组件中,你可以使用`fetch` API来下载静态文件。首先,你需要使用`fetch`函数获取文件的URL,并将其作为参数传递给`fetch`函数。然后,你可以使用`response.blob()`方法将响应转换为Blob对象,并使用`URL.createObjectURL()`方法创建一个临时URL。最后,你可以创建一个隐藏的`<a>`标签,并设置其`href`属性为临时URL,然后使用JavaScript模拟点击该链接来触发文件下载。以下是一个示例代码:
```javascript
// 下载文件的函数
function downloadFile(url, filename) {
fetch(url)
.then(response => response.blob())
.then(blob => {
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
});
}
// 调用下载文件的函数
downloadFile('/path/to/file.pdf', 'myfile.pdf');
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)