下载文件 手机端 vue
时间: 2023-10-17 21:25:28 浏览: 34
在 Vue 中,可以使用 `axios` 库来进行网络请求,包括下载文件。以下是一个简单的例子,演示如何从服务器下载一个文件,并将其保存到本地:
```vue
<template>
<div>
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async downloadFile() {
const url = 'http://example.com/file.pdf';
const response = await axios({
url: url,
method: 'GET',
responseType: 'blob', // 指定响应类型为二进制数据
});
const blob = new Blob([response.data], { type: response.headers['content-type'] });
const urlObject = window.URL || window.webkitURL || window;
const downloadUrl = urlObject.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'file.pdf'; // 指定文件名
a.click();
urlObject.revokeObjectURL(downloadUrl);
},
},
};
</script>
```
上面的代码演示了如何使用 `axios` 来进行文件下载,并使用 Blob 和 URL.createObjectURL() 将文件内容转换为下载链接,并将下载链接绑定在一个 `<a>` 元素上,从而触发下载。对于移动端,也可以使用相应的浏览器 API 实现文件下载。