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 相关文章推荐
jQuery把表单元素变为json对象
Nov 06 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
简述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中一个完整表单处理实现代码
2011/11/10 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
初识php MVC
2014/09/10 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jQuery select控制插件
2009/08/17 Javascript
使用js画图之画切线
2015/01/12 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
shell程序中如何注释
2012/01/28 面试题
技校生自我鉴定范文
2013/09/26 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
学生安全责任协议书
2016/03/22 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers