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


Posted in Javascript onJanuary 23, 2018

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

Javascript 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
简述vue中的config配置
Jan 23 #Javascript
JS实现多物体运动的方法详解
Jan 23 #Javascript
JS运动改变单物体透明度的方法分析
Jan 23 #Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 #Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 #Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
You might like
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php单例模式实现方法分析
2015/03/14 PHP
基于php判断客户端类型
2016/10/14 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Django开发中的日志输出的方法
2018/07/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python os.access()用法实例
2019/02/18 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python实现倒计时小工具
2019/07/29 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
银行财务部实习生的自我鉴定
2013/11/27 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
社区健康教育工作方案
2014/06/03 职场文书
生物科学专业自荐书
2014/06/20 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2015年药店工作总结
2015/04/20 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书