后端返回文档流,前端如何下载
时间: 2023-12-29 15:14:04 浏览: 97
Javascript前端下载后台传来的文件流代码实例
如果后端返回的是文档流,前端可以利用Blob对象和URL.createObjectURL来实现文件下载。具体实现步骤如下:
1. 将文档流转换成Blob对象:
```javascript
const blob = new Blob([response.data], { type: 'application/octet-stream' });
```
其中,response.data为后端返回的文档流,Blob构造函数的第二个参数是文件类型,这里设置为application/octet-stream表示二进制流。
2. 使用URL.createObjectURL创建下载链接:
```javascript
const url = URL.createObjectURL(blob);
```
3. 创建a标签并设置下载链接:
```javascript
const link = document.createElement('a');
link.href = url;
link.download = 'filename.ext'; // 设置下载的文件名和扩展名
```
4. 模拟点击a标签来触发文件下载:
```javascript
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
```
完整的示例代码如下:
```javascript
axios.get('/api/download').then(response => {
const blob = new Blob([response.data], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'filename.ext'; // 设置下载的文件名和扩展名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
```
注意,由于使用了URL.createObjectURL创建下载链接,需要手动调用URL.revokeObjectURL释放资源。在上述示例代码中,由于点击a标签后会自动跳转或下载,所以可以在点击之后立即调用URL.revokeObjectURL释放资源。如果是手动下载,需要在下载完成后再手动调用URL.revokeObjectURL释放资源。
阅读全文