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程序设计有所帮助。

时间: 2018-01-21

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

PHP上传Excel文件导入数据到MySQL数据库示例

最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开发框架.可在ThinkPHP官网下载. PHPExcel:Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可在CodePlex官网下载.. 1.设计MySQL数据库product 创建product数据库 CREATE DATABASE product D

elemetUi 组件--el-upload实现上传Excel文件的实例

elemetUi 组件--el-upload实现上传Excel文件的实例 [需求]实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断. [知识点] 1.el-upload 官方文档中,主要用到了以下属性: data 可选参数, 上传时附带的额外参数 name 可选参数, 上传的文件字段名 before-upload 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传.

asp.net上传Excel文件并读取数据的实现方法

前言 本文主要给大家介绍了关于asp.net上传Excel文件并读取数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 实现如下: 前台代码:使用服务端控件实现上传 <form id="form1" runat="server"> <div> <asp:FileUpload ID="ExcelFileUpload" runat="server" /> <as

django 通过URL访问上传的文件方法

Django2.0 通过URL访问上传的文件(pdf.picture等) Django是一个成熟的web框架,基于python实现,有很多的优点,很容易快速上手(详见官网:https://www.djangoproject.com/)的文档,Django2.0的文档有1872页,不得不说是非常全的,文档是可谓包罗万象. Django给我的感觉是很好很强大,至少比flask要完整的多,如果实现一个简单的需求,flask足够了,不过要安装各种依赖包,一个字繁琐!而Django则集成了非常非常全的功能

Django后台获取前端post上传的文件方法

由于初学Django所以对于其特有的表单模板和models中的filefiled并不是特别熟悉.因此在本次开发中还是依照以往自己在html中写好图片提交表单: 注意在<form>表单的定义中一定要加上enctype= "multipart/form-data"属性,否则后台可能会取不到文件. 在form表单后一定要有{% csrf_token %} 我们在控制页面可以看到,当我们通过这样的表单进行提交后,FILES一栏中会有一个文件. 我们可以在views.py中通过 im

koa上传excel文件并解析的实现方法

1.中间键使用 koa-body npm install koa-body --save const koaBody = require('koa-body'); app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制,默认2M } })); 2.书写路由,croller书写方法 uploadData.js const errorResult = require

jQuery实现jQuery-form.js实现异步上传文件

做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8.[纳尼,没遇到过,那你们产品和UI对你也忒好了吧. 遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷. 一.举个栗子 1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery. 2.html 部分: <form action='' enctype="multipar

Jquery异步上传文件代码实例

这篇文章主要介绍了Jquery异步上传文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一,view代码 <form role="form"> <div class="form-group"> <label for="keyinput">选择文件:</label> <input type="file" name=

ASP.NET实现上传Excel功能

这几天正好用到上传Excel,并根据Excel中的数据做相应的处理,故整理以备用. 用到的资源: (1)NOPI 2.2.0.0 可自己官网下载,也可点击:http://pan.baidu.com/s/1b1EMdg (2)用到一些常见处理文件的公共方法类,可以添加到项目中:http://pan.baidu.com/s/1bJpHuQ 如过上述连接因故无法使用,可在评论留下邮箱,我打包发送过去,如有更好的建议,欢迎指导. 后台的提示方法ShowMsgHelper,根据自己的改写即可. 前台代码: