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

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

赞 (0)

相关推荐

  • AngularJs导出数据到Excel的示例代码

    公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na

  • angularjs中$http异步上传Excel文件方法

    1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"> <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button> <input id="file_asset" type

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

    本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能.分享给大家供大家参考,具体如下: 使用PHPExcel插件的同学们都知道,导出excel是直接将生成内容修改content-type来将内容作为文件下载的,这时候需要页面上有一个url,通过点击来下载. 那么问题来了,如果在生成excel时有请求参数,只能通过js的http请求,这时候怎么下载呢? 研究了一下,有以下几种方式: 1. angularjs创建a标签模拟下载 // 创建a标签模拟下载 functi

  • PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创

    PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创

    本文实例讲述了PHP实现生成vcf vcard文件功能类定义与使用方法.分享给大家供大家参考,具体如下: 前面介绍了php读取vcf文件的方法,这里再来研究一下vcf文件的生成方法. VCF格式是Windows系统中outlook的名片存储格式,打开VCF格式需要使用手机的相应配套软件,使用outlook也可以打开VCF文件. 手机通讯录保存的文件格式也是vcf格式.这里就来给出一个使用php生成vcf格式文件的实例. 具体代码如下: <?php date_default_timezone_se

  • Java树形结构数据生成导出excel文件方法记录

    Java树形结构数据生成导出excel文件方法记录

    目录 什么是树形结构数据 效果 用法 源码 总结 什么是树形结构数据 效果 用法 String jsonStr = "{\"name\":\"aaa\",\"children\":[{\"name\":\"bbb\",\"children\":[{\"name\":\"eee\"},{\"name\":\"f

  • Java Hutool工具实现验证码生成及Excel文件的导入和导出

    Java Hutool工具实现验证码生成及Excel文件的导入和导出

    目录 1.Hutool工具简介 2.Hutool的相关依赖 3.验证码工具 4.excel工具 1.Hutool工具简介 HuTool工具(糊涂工具),第三方插件工具,简化操作,是国产的一个产品,界面简洁易懂,比较人性化.(上班可能经常用的到,建议收藏起来) Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以"甜甜的". 2.Hutool的相关依赖 maven项目在pom.xml添

  • 使用Ajax生成的Excel文件并下载的实例

    很久沒有寫文章啦,今天分享一個如何在ASP.NET MVC里使用Ajax下載生成文件的方法,以下只是個人心得: 大家都應該知道,在ASP.NET MVC里,如果通過Ajax調用后臺控制器時,可以返回一個JSON對象,但并不能直接返回文件(除非刷新頁面,那就不是Ajax啦),所以如果想用Ajax生成文件并下載的話,那只要將生成的文件先保存到服務器上,然後再將文件路徑通過JSON返回,之後才可以進行下載,當然由於是暫時性存放,所以當下載完后就需要馬上刪除相應的文件. 以下是做法以動態生成Excel為

  • PHP使用ajax的post方式下载excel文件简单示例

    本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'demo.xlsx'; $objWriter = \PHPExcel_IOFactory::createWriter($objectPHPExcel, 'Excel2007'); ob_start();

  • JS基于onclick事件实现单个按钮的编辑与保存功能示例

    JS基于onclick事件实现单个按钮的编辑与保存功能示例

    本文实例讲述了JS基于onclick事件实现单个按钮的编辑与保存功能.分享给大家供大家参考,具体如下: 该实例可以实现点击同一个按钮实现编辑和保存的功能: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q

  • js基于FileSaver.js 浏览器导出Excel文件的示例

    本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes

  • PHP使用CURL实现下载文件功能示例

    本文实例讲述了PHP使用CURL实现下载文件功能.分享给大家供大家参考,具体如下: 如果使用CURL下载从微信手机端上传的图片?参考下面代码 /** * CURL下载文件 成功返回文件名,失败返回false * @param $url * @param string $savePath * @return bool|string * @author Zou Yiliang */ public function downFile($url, $savePath = './uploads') { /

  • python 读写excel文件操作示例【附源码下载】

    本文实例讲述了python 读写excel文件操作.分享给大家供大家参考,具体如下: 对excel文件的操作,python有第三方的工具包支持,xlutils,在这个工具包中包含了xlrd,xlwt等工具包.利用这些工具,可以方便的对excel 进行操作. 1. 下载 xlutils : http://pypi.python.org/pypi/xlutils 2. 安装,解压下载文件之后,可以 python setup.py install 3. 应用(生成EXCEL,遍历EXCEL,修改EXC

随机推荐