前端实现流下载并设置下载文件名称

最新推荐文章于 2024-06-26 16:30:27 发布

夜月明_

最新推荐文章于 2024-06-26 16:30:27 发布

阅读量1.6k

点赞数 1

分类专栏：前端总结文章标签： javascript angular 前端

本文链接：https://blog.csdn.net/qq_15798421/article/details/118709728

版权

本文介绍了前端实现文件下载的两种方式，包括利用window.open的简单get下载和推荐的Blob流下载方法。通过Blob流下载可以设置请求头，便于后台记录日志，更适用于需要身份验证的场景。

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

下载文件前端一般是两个方式下载
1：get下载
利用window.open来下载数据
优点：简单易操作；
缺点：因为get无法设置请求头，所以一般的身份信息就不能在请求头里带了，要么就是get的路径里加上身份信息，方便记录日志。
不是很推荐

window.open( res.data);

2：前端流下载
生成blob流的方式来下载文件，比较推荐的方式
下面是项目里写的一个方法

 // 导出列表 1pdf 2word 3html 
    exReport(type: number) {
   
        this.reportBody.doctype = type;
        type === 1 ? this.pdfLoading = true : type === 2 ? this.wordLoading = true : this.htmlLoading = true;
        const url = type === 1 ? this