视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
AngularJS基于http请求实现下载php生成的excel文件功能示例
2020-11-27 22:20:54 责编:小采
文档


本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能。分享给大家供大家参考,具体如下:

使用PHPExcel插件的同学们都知道,导出excel是直接将生成内容修改content-type来将内容作为文件下载的,这时候需要页面上有一个url,通过点击来下载。

那么问题来了,如果在生成excel时有请求参数,只能通过js的http请求,这时候怎么下载呢?

研究了一下,有以下几种方式:

1. angularjs创建a标签模拟下载

// 创建a标签模拟下载
function exportExcel(params, filename) {
 return $http({
 url: '/api/exportExcel',
 method: "POST",
 headers: {
 'Content-type': 'application/json'
 },
 params: params,
 responseType: 'arraybuffer'
 }).success(function (data) {
 var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
 var objectUrl = URL.createObjectURL(blob);
 var a = document.createElement('a');
 document.body.appendChild(a);
 a.setAttribute('style', 'display:none');
 a.setAttribute('href', objectUrl);
 a.setAttribute('download', filename);
 a.click();
 URL.revokeObjectURL(objectUrl);
 });
}

这个方式中要注意,如果传输的是xls,也就是excel5文件,type要设置为application/vnd.ms-excel 或application/x-excel。

2. js将请求参数生成url,创建a标签

// 生成下载url
$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_date;

然后将url绑定到某个a标签中,这种方式适合参数较少的情况,而且数据不会经过二次处理,不易发生error,唯一的缺点是需要处理两次,可以设置两个按钮,一个为生成,将参数写入url中,第二个按钮为下载excel。虽然用户是两次操作,但实际上只发生了一次http请求,不会影响性能。

3. 先生成后下载

第三种方式类似第二种,首先生成excel文件,储存到服务器,然后下载。涉及到磁盘IO,所以性能比较低,不推荐这种方式,只是作为一个方法记录下来。

angularjs模拟下载的方式最方便,但有可能出现error,第二种方式最保险。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

下载本文
显示全文
专题