vue文件流下载

最新推荐文章于 2024-08-20 18:30:57 发布

abcdef_520

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量120

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/abcdef_520/article/details/129426490

版权

该文章讲述了如何在前端利用后端返回的文件流进行处理，通过创建Blob对象，然后创建一个隐藏的a标签，设定其href为文件流的URL并指定下载文件名为报表模板.xlsx，最后模拟点击a标签触发文件下载。这个过程展示了前端动态生成文件下载的一种常见方法。

摘要由CSDN通过智能技术生成

1 后端返回文件流，前端进行处理
在这里插入图片描述

2 转换代码

let res = xxx(this.params) //xxx代表接口 this.params代表参数
var blob = new Blob([res]);
var downloadElement = document.createElement('a'); //创建一个<a></ a>标签
     downloadElement.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
     downloadElement.download = '报表模板.xlsx'; //设置文件名
     downloadElement.style.display = 'none';  // 藏起来a标签
     document.body.appendChild(downloadElement); // 将a标签追加到文档对象中
     downloadElement.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
     downloadElement.remove()