angularJS实现无刷新文件下载
$scope.getExcel = function () {
$http.post("/production/statistics/export", {
storeId: $scope.$parent.currStore.storeId,
date: $scope.$parent.ledgerDate.getTime()
}, {responseType: "blob"}).success(function (data) {
var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var fileName = $scope.$parent.currStore.name + "_生产统计_" + $scope.$parent.ledgerDate.Format("yyyy-MM-dd");
var a = document.createElement("a");
document.body.appendChild(a);
a.download = fileName;
a.href = URL.createObjectURL(blob);
a.click();
})
}
并且服务端返回的是二进制数据流.
客户端接收后转换为指定文件格式的blob,最后创建blob对象的URL 把它放在A标签的href上 就会自动下载了
或者
$http.post($rootScope.restful_api.last_output_excel,body_data,{responseType: 'arraybuffer'}).success(function(data){
var blob = new Blob([data], {type: "application/vnd.ms-excel"});
var objectUrl = URL.createObjectURL(blob);
var aForExcel = $("<a><span class='forExcel'>下载excel</span></a>").attr("href",objectUrl);
$("body").append(aForExcel);
$(".forExcel").click();
aForExcel.remove();
})
经验总结:
1.post的方法里要加responseType: 'arraybuffer'参数,不然下载的excel会乱码(这点一开始没注意到,费力好久)
2.使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx
3.使用增加节点调用click方法,而不使用帖子中的window.open(objectUrl)方法,是防止被浏览器当插件屏蔽弹出连接
另外也可以分为两步来做,一是异步请求判断下载是否存在,二是再次调用在后端通过response下载文件。
angularJS实现无刷新文件下载的更多相关文章
- Javascrpt无刷新文件上传
最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XML ...
- jquery+ajax(用ajax.dll)实现无刷新分页
利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- 利用Content-disposition实现无刷新下载图片文件
今天在使用 tinypng.com 这个在线压缩图片的网站时,对其处理完图片后,可以无刷新下载图片感到好奇,于是了解了一下相关实现.无刷新下载可以利用MIME type或者设置Content-disp ...
- MvcPager.dll使用实现无刷新分页以及MvcPager的Nuget程序包实现刷新分页
无刷新分页: 1.引入JQuery的NuGet程序包 2.引入程序包 3.引入MvcPager.dll ,MvcPager.dll文件下载链接http://pan.baidu.com/s/1hsvB ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- 页面无刷新Upload File
页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
随机推荐
- Java信号量Semaphore
Semaphore Semaphore分为单值和多值两种,前者只能被一个线程获得,后者可以被若干个线程获得. Semaphore实现的功能就类似厕所有5个坑,假如有10个人要上厕所,那么同时只能有多少 ...
- ElasticSearch5.X—模糊查询和获取所有索引字段
最近在做一个分布式数据存储的项目,需要用到ElastciSearch加速数据查询,其中部分功能需要进行模糊查询和统计索引库中已经建立的索引字段,网上查阅了很多资料,最终把这两个问题解决了,不容易!下面 ...
- GPUImage API文档之GPUImageInput协议
GPUImageInput协议主要包含一些输入需要渲染目标的操作. - (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)t ...
- 使用 HTML5, javascript, webrtc, websockets, Jetty 和 OpenCV 实现基于 Web 的人脸识别
这是一篇国外的文章,介绍如何通过 WebRTC.OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上. 实现的效果包括: 还能识别眼睛 人脸识别的核心 ...
- SuperMap开发入门4——保存的坑
工作空间.地图等的打开.保存.删除是最基本的操作,可我居然卡在保存工作空间的问题上了. 功能需求 需求很简单:打开工作空间中的某一地图,缩放一下,保存地图.(下次打开时,已经缩放到上次修改过的地方) ...
- 性能测试工具——Mxdperfstat
Mxdperfstat是一款mxd性能检测工具,使用它来测试专题地图的性能非常不错! 获取工具 https://www.arcgis.com/home/item.html?id=a269d03aa1c ...
- 微信小程序 - 配置普通二维码跳小程序
普通二维码跳小程序规则: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%B ...
- Python3中使用Mysql的用法。
一.Python2中一般使用MySqldb来调用Mysql,但是在Python3中不支持该包,使用pymysql来代替了,用法一模一样. 二.安装: pip install pymysql 三.例子: ...
- JDK5.0 特性-线程任务执行架构 ScheduledExecutorService
来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291469.html import java.util.concurrent.Callable ...
- 一个简单的 JSON 生成/解析库
这是一个单文件的,适用于C语言的, JSON 读写库. 先说明,不想造轮子,代码是从这里拿来的: https://www.codeproject.com/Articles/887604/jWrite- ...