-
安装 axios（如果还没有安装）：
npm install axios -
创建一个方法来处理文件下载：
在你的 Vue 组件中，可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流，你可以使用
axios来发送请求并处理响应。
<template>
<div>
<button @click="downloadFile">Download File</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async downloadFile() {
try {
// 假设你的接口是 /api/get-file
const response = await axios.get('/api/get-file', {
responseType: 'blob' // 确保响应类型为blob
});
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf'); // 设置下载的文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (error) {
console.error('Error downloading file:', error);
}
}
}
};
</script>
axios.get('/api/get-file', { responseType: 'blob' })：发送一个GET请求到你的 API 接口，并将响应类型设置为blob，以便接收二进制数据。window.URL.createObjectURL(new Blob([response.data]))：将响应数据转换为一个 Blob 对象，并生成一个临时的URL。- 创建一个隐藏的
<a>标签，并将其href属性设置为生成的临时URL，同时设置download属性以指定下载的文件名。 - 将这个
<a>标签添加到文档中，然后模拟点击事件以触发下载。 - 最后，移除这个临时创建的
<a>标签。
这样，当用户点击按钮时，浏览器会开始下载指定的文件。
