导出Excel功能-从服务端到浏览器的简单处理
来源:互联网 发布:php 小项目 不用 mvc 编辑:程序博客网 时间:2024/05/14 13:33
服务端定义一个导出功能的关键代码
Java 定义一个export的功能函数,以下为关键代码(接口中的一部分处理逻辑):
@Overridepublic byte[] export(String startdate, String enddate, Integer type, String name, HttpServletResponse response) { // other logic omitted here ... // set response args,it used for open download response.reset(); response.setContentType("application/vnd.ms-excel;charset=utf-8"); try { response.setHeader("Content-Disposition", "attachment;filename=" + new String((name+ ".xls").getBytes(), "iso-8859-1")); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } ByteArrayOutputStream output = new ByteArrayOutputStream(); try { workList.write(output); // write } catch (IOException e) { e.printStackTrace(); } return output.toByteArray();}
前端处理,方式1:使用ng1实现,在自定义指令中来通过接口接收数据流 [ 存在兼容问题的方式 ]
指令如下:
angular.module('yourNgApp') .directive('sysExport', function ($http, $document) { return { templateUrl: "app/system/export/export.directive.html", restrict: 'EA', replace: true, scope: { item: '=' }, link: function (scope, element) { // 访问请求的函数 function getExport(postData) { // 拼出自己的url var url = '/api/course/export?startdate=' + postData.startdate + '&enddate=' + postData.enddate + '&type=' + postData.type + '&name=' + postData.name; // 注意下面的responseType 一定要有哦! var finalPostData = { url: url, method: 'POST', responseType: "arraybuffer", headers: {'Content-type': 'application/json'} }; $http(finalPostData) .success(function (data) { var blob, fileName, blobArgs; blobArgs = {type: 'application/vnd.ms-excel application/x-excel'}; blob = new Blob([data], blobArgs); var a = $document[0].createElement('a'); a.download = postData.name + '.xls'; a.href = URL.createObjectURL(blob); a.click(); }) .error(function (e) { console.log(e); }); } element.on('click', function () { getExport(scope.item); }); } }; });
至此可实现通过指令的点击事件来下载excel格式了。
因为导出功能多用于后台管理,适用性不是很普遍,所以兼容问题可协商,所以前台使用了Blob对象。
为了节约服务器资源可通过此种方式通过点击来下载,而不是将导出的文件单独存放到服务器上通过返回excel所在的url地址来进行下载。
前端处理,方式2:直接通过a链接访问,[兼容性好]
<a href="/api/course/export?startdate={{cl.startdate}}&enddate={{cl.enddate}}&type={{cl.type}}&name={{cl.name}}" class="btn btn-success">导出</a>
扩展
- mine 类型: http://www.w3school.com.cn/media/media_mimeref.asp
- Blob的用法和兼容性:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
- Java 端用于导出excel的工具 poi : http://poi.apache.org/ https://github.com/apache/poi
- 关于 a.download以及它的兼容性 : http://www.w3school.com.cn/tags/att_a_download.asp
- 关于 URL.createObjectURL : https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
总结:
上面前端用到的都是一些H5高级API 适用性不是很高, 但也临时解决了一些问题,只作为尝试 :)
通过a链接的方式请求, 直接在服务器端完成文件的操作,点击后直接下载,兼容良好,但不适合大文件的传输下载。
0 0
- 导出Excel功能-从服务端到浏览器的简单处理
- 简单Excel导出功能
- javaEE实现简单的导出excel功能
- 从浏览器导出excel表单
- 浏览器表格导出到Excel
- POI导出到Excel的简单例子
- POI导出到Excel的简单例子
- POI导出到Excel的简单例子
- POI导出到Excel的简单例子
- 从浏览器到服务端的中文乱码深入分析
- 从GridView导出到Excel
- 从 DataGridView 导出到 Excel
- web项目中实现从网页导出Excel的功能
- DataGridView从excel导入、导出到excel
- 'vb.net2005的导出到Excel功能函数
- 报表导出到word或者excel的功能实现
- Poi简单实现Excel的导出导入功能
- 从GridView导出数据到Excel时的注意事项
- Java中 super关键字
- BZOJ P3212 Pku3468 A Simple Problem with Integers
- 杭电oj(java版)——1092 A+B for Input-Output Practice (IV)
- 前后端共享文件的批处理
- 在ubuntu下,把安装的中文输入法切换出来
- 导出Excel功能-从服务端到浏览器的简单处理
- CSS属性
- 更新应用程序安卓apk时出现解析程序包时出现问题
- 【种类并查集】 poj1182食物链
- Jmeter之响应断言
- 数据标准化:数据资产化从0到1的起点
- 文件编码格式ANSI转UTF8
- RecyclerView简单使用总结
- 比较二棵二叉排序树是否相等