文件导出在软件开发中是个比较常用的功能,基本原理也很简单:

  • 浏览器向后台发送一个Get请求
  • 后台处理程序接收到请求后,经过处理,返回二进制文件流
  • 浏览器接收到二进制文件流后提示下载文件

调用的js方法如下 , 通过URL传值的方式Get请求到后台处理程序

function expExcel(){

    var url="../function/expExcel?ExportUnit=谨华控股";

    window.location.href=url;
}

这种方式虽然简单实用,但在有些情况下也不适用。比如只能采用GET方法,传递参数不能太复杂。一般需要在调用的页面创建一个隐藏iframe。。。。。

下面一个angularjs 的一个导出实例

self.excel = function() {
var dataUrl = "http://www.order.com/list/excel";
$http({
method: 'post',
url: dataUrl,
data: {},
transformRequest: function(data) {
return $.param(data);
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
responseType: 'arraybuffer'
}).success(function(data) { var blob = new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
}); var da = new Date();
var fileName = "数据导出" + da.getFullYear() + '-' + (da.getMonth() + ) + "-" + da.getDate() + ".xlsx"; self.saveas(blob, fileName); }); }; self.saveas = function(blob, fileName) {
if (window.navigator.msSaveOrOpenBlob) { // For IE:
navigator.msSaveBlob(blob, fileName);
} else { // For other browsers:
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}
}

一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。

Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。

var blob = new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});

文件导出也可以这么写【js+blob】的更多相关文章

  1. FileSaver.js 实现浏览器文件导出

    FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况

  2. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  3. PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型),把Comment写到name中,pdm文件导出为word

    PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型) 环境:powderdesigner12.5:mysql5.0步骤:1. 为指定的数据库配置mysql的ODBC数据源先下载 ...

  4. 网页中Office和pdf相关文件导出

    最近被派去维护和开发一些做了一半.年久失修的项目.有一部分内容是关于word文件导出,顺带着把excel.pdf文件的导出也调研下吧,我想未来开发我应该会遇到的,遂做了下笔记分享给需要的人. 由于项目 ...

  5. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  6. 文件/大文件上传功能实现(JS+PHP)全过程

    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...

  7. C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图

    C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图 +BIT祝威+悄悄在此留下版了个权的信息说: 最近需要用OpenGL绘制文字,这是个很费时费力的事.一般的思路就是 ...

  8. loadrunner实现excel文件导出操作

    项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...

  9. JAVA实用案例之文件导出(JasperReport踩坑实录)

    写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...

随机推荐

  1. SpringBoot简单连接数据库以及查询数据

    实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...

  2. 情景linux—不曾了解的cat用法

    情景 cat是linux命令中最为基础的命令之一,它是"concatenate"(连接)的简写,作用概述是concatenate and print files,即:连接和查看文件 ...

  3. Linux socket网络编程基础 tcp和udp

    Socket TCP网络通信编程 首先,服务器端需要做以下准备工作: (1)调用socket()函数.建立socket对象,指定通信协议. (2)调用bind()函数.将创建的socket对象与当前主 ...

  4. Windows PowerShell漫谈-win7下没有超级终端

    Windows PowerShell是我在研究win7新特性的时候发现的新工具,起初没有对它产生太大的兴趣,只是简单看看了有关它的介绍.简单使用了一下,感觉上它和cmd.exe没有本质区别.对它产生兴 ...

  5. DOS下串口通信程序来传送文件的源代码

    接收程序: #include <dos.h>#include <fstream.h>#include <conio.h>#include <stdio.h&g ...

  6. 如何构造一个简单的USB过滤驱动程序

    本文分三部分来介绍如何构造一个简单的USB过滤驱动程序,包括"基本原理"."程序的实现"."使用INF安装".此文的目的在于希望读者了解基本 ...

  7. FusionCharts 3D环饼图报错

    1.在设计FusionCharts 3D环饼图时,出现错误,图显示不出来,具体错误如下图: 2.经过检查,发现声明的变量和下面引用的变量不一致 var doughnut2D = new FusionC ...

  8. ubuntu 重启命令,ubuntu 重启网卡方法

    ubuntu 重启命令 重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shutd ...

  9. 【mysql】mysql密码设置和更改

    密码设置: 当用户没有设置密码时: 添加密码: mysqladmin -uroot -password ab12 注:因为开始时root没有密码,所以-p旧密码一项就可以省略了. 当用户存在密码时: ...

  10. freemarker报错之十一

    1.错误描述 六月 03, 2014 11:00:35 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...