AngularJS基于http请求实现下载php生成的excel文件功能示例

 更新时间:2018年01月23日 14:33:03   作者:重口味AC  
这篇文章主要介绍了AngularJS基于http请求实现下载php生成的excel文件功能,结合实例形式分析了AngularJS http请求及文件下载等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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-excelapplication/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程序设计有所帮助。

相关文章

  • 监听angularJs列表数据是否渲染完毕的方法示例

    监听angularJs列表数据是否渲染完毕的方法示例

    前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这篇文章主要介绍了监听angularJs列表数据是否渲染完毕的方法示例,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • Angularjs实现页面模板清除的方法

    Angularjs实现页面模板清除的方法

    这篇文章主要介绍了Angularjs实现页面模板清除的方法,需要的朋友可以参考下
    2018-07-07
  • AnglarJs中的上拉加载实现代码

    AnglarJs中的上拉加载实现代码

    上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解AnglarJs集成,上拉加载功能。感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • Angular表格神器ui-grid应用详解

    Angular表格神器ui-grid应用详解

    这篇文章主要为大家详细介绍了Angular表格神器ui-grid应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    详解AngularJS中$filter过滤器使用(自定义过滤器)

    这篇文章主要介绍了详解AngularJS中$filter过滤器使用(自定义过滤器)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    这篇文章主要介绍了AngularJS实现的获取焦点及失去焦点时的表单验证功能,涉及AngularJS使用ng-blur、ng-focus针对表单事件监听相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • angular.js分页代码的实例

    angular.js分页代码的实例

    本文用实例详细给大家展示了angular.js分页代码,代码很详细,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Angular6封装http请求的步骤详解

    Angular6封装http请求的步骤详解

    最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块
    2018-08-08
  • 详细谈谈AngularJS的子级作用域问题

    详细谈谈AngularJS的子级作用域问题

    大家在使用angularjs的时候,很容易忽略AngularJS自带指令的作用域问题,有一些指令会产生独立的自己作用域,造成子级无法与父级作用域双向绑定的问题。下面我们来看看这些问题,有需要的可以参考借鉴。
    2016-09-09
  • angular和BootStrap3实现购物车功能

    angular和BootStrap3实现购物车功能

    这篇文章主要为大家详细介绍了angular和BootStrap3实现购物车功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论