前端文件下载方案汇总

最新推荐文章于 2024-06-28 10:00:12 发布
最新推荐文章于 2024-06-28 10:00:12 发布
阅读量475 收藏
点赞数
分类专栏： 前端 文章标签： 文件下载 文件下载过程处理 文件下载状态展示 文件下载错误处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AaronSimon/article/details/103423224
版权

通常前后端数据交互都是用JQuery的ajax函数，其返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们无法使用ajax实现文件下载。下面介绍几种文件下载的思路。

一、windows.open下载文件

后端返回的是文件流

1.1 前端代码

var downloadURL = "appraise/download?flightNo=123";
window.open(downloadURL);

1.2 后端代码

response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
String fileName = URLEncoder.encode("测试", "UTF-8");
//通知浏览器下载文件而不是打开
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");

//工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
int index = 0;
for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
    if(providers.containsKey(entry.getKey())){
        AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
        ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
    }
}
workbook.write(response.getOutputStream());

1.3 优点

  • 浏览器兼容性好

1.4 缺点

  • URL长度受限制
  • 拿不到后端处理这个过程的时机，无法根据回调函数做交互以及进度提示

二、ajax提交请求，后端返回文件在线地址

后端返回的是文件地址（文件地址可访问）

2.1 前端代码

$.ajax({
    type: "post",
    url: "appraise/download",
    data: {'flightNo':'123'},
    success: function (res) {
        if (res.Status) {
            // window.open或者a标签下载 
            var isSupportDownload = 'download' in document.createElement('a');
            if (isSupportDownload) {
                var $a = $("<a>");
                $a.attr({
                    href: res.url,
                    download: 'filename'
                }).hide().appendTo($("body"))[0].click();
            } else {
                window.open(res.url)
            }
        } else {
            alert(res.Message);
        }
    }
})

2.2 后端代码

return "doc/adscf-1123-221ss-dda.doc";

2.3 优点

  • 可以获取文件返回时机，可以做交互

2.4 缺点

  • 线上产生大量的中间临时文件，可以用设置时限来优化或可使用大厂的云存储，从而减少临时文件的产生

三、使用form.submit下载文件

后端返回文件流

3.1 前端代码

try{
        var exportForm = $("<form action='appraise/downLoad' method='post'></form>");
        exportForm.append("<input type='hidden' name='flightLeftDate' value='" + flightLeftDate + "'/>");
        exportForm.append("<input type='hidden' name='flightRightDate' value='" + flightRightDate + "'/>");
        exportForm.append("<input type='hidden' name='evaluationType' value='vectorDataEvaluation'/>");
        $(document.body).append(exportForm);
        exportForm.submit();
    }catch (e) {
        alert_prompt(e);
    }finally {
        exportForm.remove();
    }

3.2 后端代码

response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
String fileName = URLEncoder.encode("测试", "UTF-8");
//通知浏览器下载文件而不是打开
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");

//工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
int index = 0;
for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
    if(providers.containsKey(entry.getKey())){
        AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
        ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
    }
}
workbook.write(response.getOutputStream());

3.3 优点

  • 兼容性良好，传统方式，不会出现URL长度限制问题

3.4 缺点

  • 拿不到后端处理这个过程的时机，无法根据回调函数做交互以及进度提示

四、使用 jquery-download 插件

  • jquery-download 下载地址：https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js
  • jquery-download CDN地址：https://www.bootcdn.cn/jquery.fileDownload/

4.1 前端代码

$.fileDownload('appraise/downLoad.jhtml', {
                httpMethod: 'post',
                data: {'flightLeftDate': flightLeftDate,'flightRightDate':flightRightDate},
                prepareCallback: function (url) {
                    console.log("文件下载中...");
                    // 数据加载动画
                    $("#loading").modal('show');
                },
                abortCallback: function (url) {
                    // 异常终止
                    alert_prompt("文件下载异常！");
                    $("#loading").modal('hide');
                },
                successCallback: function (url) {
                    alert_prompt("文件下载成功！");
                    $("#loading").modal('hide');
                },
                failCallback: function (html, url) {
                    if(html.indexOf('<') >= 0) {
                        html = $(html).text();
                    }
                    var result = JSON.parse(html);
                    $("#loading").modal('hide');
                    alert_prompt("文件下载失败：" + result.Head.Msg);
                }
            });

4.2 后端代码

        if(!evaluationTypeMap.isEmpty()){
            try{
                response.setContentType("application/vnd.ms-excel");
                response.setCharacterEncoding("utf-8");
                // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
                String fileName = URLEncoder.encode("测试", "UTF-8");
                response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xls");
                response.setHeader("Set-Cookie", "fileDownload=true; path=/");

                //工作薄
                HSSFWorkbook workbook = new HSSFWorkbook();
                int index = 0;
                for(Map.Entry<String, List<EvaluationDo>> entry : evaluationTypeMap.entrySet()){
                    if(providers.containsKey(entry.getKey())){
                        AbstractEvaluationProvider evaluationDataProvider = providers.get(entry.getKey());
                        ExportExcelUtils.exportExcel(workbook,index++,evaluationDataProvider.createSheet(),evaluationDataProvider.createHead(),evaluationDataProvider.createData(entry.getValue()));
                    }
                }
                workbook.write(response.getOutputStream());
            }catch (Exception e){
                log.error("efb:评价导出---->导出失败：",e);
                // 重置response
                response.reset();
                response.setContentType("application/json");
                response.setCharacterEncoding("utf-8");
                EfbReturnPO efbReturnPO = new EfbReturnPO();
                efbReturnPO.setUnSuccessHead("下载文件失败：" + e.getMessage());
                response.setHeader("Set-Cookie", "fileDownload=false; path=/");

                response.getWriter().println(AOSJson.toJson(efbReturnPO));
            }
        }else{
            log.error("efb:评价导出---->导出失败：无匹配数据");
            // 重置response
            response.reset();
            response.setContentType("application/json");
            response.setCharacterEncoding("utf-8");
            EfbReturnPO efbReturnPO = new EfbReturnPO();
            efbReturnPO.setUnSuccessHead("无匹配数据！");
            response.setHeader("Set-Cookie", "fileDownload=false; path=/");

            response.getWriter().println(AOSJson.toJson(efbReturnPO));
        }

注意：后端代码增加了一个名为"fileDownload"的cookie的返回；jquery.download.js插件使用该cookie来判断是否下载成功，从而进入成功回调函数（successCallback）

4.3 优点

  • 浏览器兼容好，此插件做了多种兼容
    • window.open(url)打开某个文件地址
    • iframe的框架中，设置src属性，通过iframe进行文件的下载，支持文件地址
    • 通过form标签，设置action的文件地址，然后通过form的提交来完成文件的下载
  • 可以获取文件返回时机，可以做交互

五、其它方案

  • iframe直接向后端提交，实现对文件流进行下载
  • Html5的Blob对象实现对文件流进行下载
  • file-saver实现对文件流进行下载
AaronSimon
关注
专栏目录
前端面试汇总
01-16
### 前端面试知识点详解 ...以上涵盖了《前端面试汇总》文档中提到的知识点，并进行了详细的解释和扩展。这些知识点对于前端开发者来说非常重要，能够帮助他们在实际项目中更好地理解和运用HTML、CSS等技术。
前端实现下载文件的各种方式
码农键盘上的梦
02-27 6211
上面的方案这么多，其实最终还是落到a标签上，所以不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。
前端：下载文件(多种方法)
热门推荐
snowball的博客
09-03 1万+
a href="https://abc.png" download="abc.png" target="view_window">下载前端经常会有下载文件的需求，这里总结了几种常用的方法，方便日后查看。四、location.href。
【前端】前端文件下载方式盘点
最新发布
九日的博客
06-28 640
以上几种方式各有优缺点，具体选择哪种方式应根据实际需求来决定。如果是简单的静态文件下载，使用标签是最简便的方式；如果需要动态生成文件内容，Blob 对象或 FileSaver.js 是不错的选择；而对于需要从服务器获取数据并下载的场景，Fetch API 和 Axios 则提供了更强大的功能和灵活性。
【JavaScript编程】前端实现文件下载
猿始森林
03-30 1904
设置请求的响应类型为blob，这样就可以接收到文件流。然后，通过获取文件流创建Blob URL，来实现下载
前端下载File类型文件
qq_36566924的博客
11-27 516
【代码】前端下载File类型文件。
JQuery文件下载，及详细过程
m0_70692179的博客
03-01 2847
jQuery是一个javaScript函数库（javaScript框架），使用jQuery，需要在html页面开始引入jQuery库。
前端面试题汇总.rar
03-09
虽然现代前端开发更多地转向轻量级库或无库方案，但理解jQuery的基本用法仍然有益。 HTML5和CSS3带来了许多新特性，如离线存储、拖放功能、画布、SVG、多媒体元素、新的表单控件以及更多的CSS选择器和动画效果。...
前端面试题汇总
09-13
以下是根据给定文件内容整理出的前端面试题知识点： 1. 浏览器兼容性测试与内核：了解不同浏览器及其内核对于前端开发非常关键，例如Chrome和Safari主要使用WebKit内核，而Firefox使用Gecko内核，IE浏览器则使用...
网页设计前端资料汇总
12-05
网页设计前端资料汇总是一份非常全面的资源集合，旨在帮助开发者和学习者深入理解并掌握网页前端开发技术。这份资料包涵盖了从基础概念到高级应用的广泛内容，为那些希望在Web开发领域提升自己技能的人提供了宝贵的...
前端工程师面试题汇总.docx编程资料
04-06
### 前端工程师面试题知识点汇总 #### HTML部分 1. **Doctype作用及模式区分** - **Doctype作用**：文档类型声明（Document Type Declaration），它用来告诉浏览器文档使用哪种HTML或XHTML规范。 - **严格模式与...
前端文件浏览插件
01-21
文件滚动预览，主要实现了文件图片在网页上预览功能，放大缩小，定位，导航等等
vue3 下载文件插件有哪些
weixin_42608318的博客
01-06 1468
vue.js 3 中的下载文件插件有以下几个： vue-download-file：这是一个轻量级的插件，它使用简单，可以帮助你在 vue.js 应用中下载文件。 vue-file-download：这是一个简单易用的插件，可以帮助你在 vue.js 应用中下载文件。 vue-save-file：这是一个用于在 vue.js 应用中下载文件的插件，它支持各种浏览器，并且使用起来非常方便。 ...
vue前端下载文件
程序源的博客
05-31 321
window.location.href =文件请求地址。使用js-file-download插件下载。安装js-file-download。
前端实现下载文件（包含压缩包下载）方式汇总
qq_38969618的博客
04-23 5695
默认最简单的下载方式是：window.open(后台接口API路径)，但该方法弊端：因是新开窗口方式，前端展示上，每次会闪下。
VUE前端导出文件之file-saver插件
xyphf的博客
12-22 4643
VUE前端导出文件之file-saver插件
Vue-前端下载zip(图片)
weixin_52594202的博客
05-31 631
前端zip下载嵌套层级图片文件 递归 jszip fileSaver qrcode
前端下载功能的实现（FileSaver插件）
程序员的自我修养
10-27 1572
1.https://juejin.im/post/6844903763359039501 2.https://segmentfault.com/a/1190000022936812 安装filesaver 安装js-xlsx 亲测可用，还没整理！！！！！！！！
前端文件下载的多种方式
ll_883963的博客
02-06 1315
在当前窗口打开百度链接在新窗口打开百度链接网页返回顶部锚点跳转——本页面跳转
教师端功能问题与改进方案
"U-Learning平台存在一系列的问题，包括前端界面、试题管理、文件上传、教学任务展示、测试监控以及实验项目复制等方面。" 在【标题】"U-Learning疑问202004071"中，我们可以看到这是一个关于U-Learning在线学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值