vue前端实现文件流下载
时间: 2023-08-09 11:08:56 浏览: 146
要实现文件流下载,需要先在后端设置好文件下载的接口,然后在前端通过ajax请求获取文件流,最后将流转换为文件进行下载。
以下是一个简单的示例代码:
```javascript
// 后端接口示例代码(Node.js)
app.get('/download', function(req, res) {
var file = 'path/to/file.pdf'; // 文件路径
var filename = 'file.pdf'; // 下载后的文件名
res.download(file, filename); // 下载文件
});
// 前端代码示例
axios({
method: 'get',
url: '/download',
responseType: 'blob' // 指定响应数据类型为二进制流
}).then(function(response) {
var blob = new Blob([response.data], { type: 'application/pdf' }); // 将二进制流转换为blob对象
var link = document.createElement('a'); // 创建a标签
link.href = window.URL.createObjectURL(blob); // 设置a标签的href属性为Blob URL
link.download = 'file.pdf'; // 设置下载文件名
link.click(); // 触发点击事件,进行下载
});
```
在上述代码中,通过axios发送get请求,设置响应数据类型为二进制流。在响应成功后,将二进制流转换为Blob对象,并创建一个a标签,将Blob URL赋值给a标签的href属性,设置下载文件名,最后触发a标签的点击事件,进行下载。
阅读全文