通过接口返回一个文件流,我转成了blob,然后通过a标签点击的方式实现下载,但是同时路由也同时跳转到其他页面,请问如何解决
时间: 2024-03-13 09:42:39 浏览: 42
在实现文件下载时,如果使用了`<a>`标签的方式,会出现页面跳转的问题。这是因为`<a>`标签的默认行为是跳转页面,所以在点击下载链接时,页面会同时跳转到下载链接的地址。
要解决这个问题,可以使用JavaScript来实现文件下载,而不是使用`<a>`标签。下面是一个示例代码:
```javascript
function downloadFile(url, filename) {
fetch(url)
.then(response => response.blob())
.then(blob => {
if (window.navigator.msSaveOrOpenBlob) {
// For IE:
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
// For other browsers:
const link = document.createElement('a');
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}
});
}
```
在上面的代码中,我们通过`fetch`函数获取文件的二进制数据,然后根据浏览器类型使用不同的方式进行文件下载。对于IE浏览器,我们直接使用`msSaveOrOpenBlob`来保存文件;对于其他浏览器,我们使用`<a>`标签的`download`属性来触发文件下载。
使用上面的代码实现文件下载时,就不会出现页面跳转的问题了。
阅读全文