angularJS实现无刷新文件下载

 1 $scope.getExcel = function () {
 2             $http.post("/production/statistics/export", {
 3                 storeId: $scope.$parent.currStore.storeId,
 4                 date: $scope.$parent.ledgerDate.getTime()
 5             }, {responseType: "blob"}).success(function (data) {
 6                 var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
 7                 var fileName = $scope.$parent.currStore.name + "_生产统计_" + $scope.$parent.ledgerDate.Format("yyyy-MM-dd");
 8                 var a = document.createElement("a");
 9                 document.body.appendChild(a);
10                 a.download = fileName;
11                 a.href = URL.createObjectURL(blob);
12                 a.click();
13             })
14         }  

并且服务端返回的是二进制数据流.

客户端接收后转换为指定文件格式的blob,最后创建blob对象的URL 把它放在A标签的href上 就会自动下载了

或者

1 $http.post($rootScope.restful_api.last_output_excel,body_data,{responseType: ‘arraybuffer‘}).success(function(data){
2                 var blob = new Blob([data], {type: "application/vnd.ms-excel"});
3                 var objectUrl = URL.createObjectURL(blob);
4                 var aForExcel = $("<a><span class=‘forExcel‘>下载excel</span></a>").attr("href",objectUrl);
5                 $("body").append(aForExcel);
6                 $(".forExcel").click();
7                 aForExcel.remove();
8             })

经验总结:

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下载文件。

时间: 2024-10-12 07:50:28

angularJS实现无刷新文件下载的相关文章

Javascrpt无刷新文件上传

最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XMLHttpRequest2的浏览器使用FormData通过ajax上传 2.对于ie10一下的浏览器使用iframe异步上传,还需后台服务器做相应处理,这部分也是dojo/request/iframe上传文件的原理. 一.使用FormData上传文件 FormData最频繁使用的功能就是表单序列化及创

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

jQuery 单页无刷新插件

现在很多网站都使用了单页无刷新效果,这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径,这里采用了ajax所以不能直接点击打开,必须得在本地服务器下执行: 文件目录: index.html 为首页展示页: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

Asp.net页面无刷新请求实现

Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q

无刷新删除 Ajax,JQuery

1.数据库用上面的,增加一个 DeleteById 的SQL方法delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string id = context.Request["id"]; //得到用户传过

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

asp.net练习②——Paginaton无刷新分页

aspx代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无刷新分页</title> <link href="c

表单 - Form - 无刷新提交原理

为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不可见 那么Form组件提交和Ajax提交怎么选择呢? 个人觉得大多数时候是差不多的,主要区别在于Form组件的提交本质还是表单,可以做到无刷新提交文件 大概原理就是这样子

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM