Export之返回流文件

最新推荐文章于 2024-12-27 15:52:35 发布

原创最新推荐文章于 2024-12-27 15:52:35 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

js 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何在前端通过HTTP GET请求获取后端返回的流文件，并进行处理，实现文件下载功能。利用Blob对象创建下载链接，通过a标签的click事件触发文件下载，确保了用户能够顺利导出历史用能数据为.xlsx格式。

这个是基于后端返回一个流文件后前端的处理

this.$http({
      url: `/customer/export-ele-his?customerId=${this.formData.customerId}&startDate=${this.dateRange[0]}&endDate=${this.dateRange[1]}`,
        method: 'get',
        responseType: 'blob',
     }).then(res => {
        // 创建一个新的url，此url指向新建的Blob对象
        const url = window.URL.createObjectURL(new Blob([res]));
        // 创建a标签，并隐藏改a标签
        const link = document.createElement('a');
        link.style.display = 'none';
        // a标签的href属性指定下载链接
        link.href = url;
        // setAttribute() 方法添加指定的属性，并为其赋指定的值。
        const fileName = '历史用能.xlsx';
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        this.$message.success('导出成功');
     }).catch(() => {
        this.$message.error('导出失败');
});