文件导出也可以这么写【js+blob】
文件导出在软件开发中是个比较常用的功能,基本原理也很简单:
- 浏览器向后台发送一个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】的更多相关文章
- FileSaver.js 实现浏览器文件导出
FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况
- html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
- PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型),把Comment写到name中,pdm文件导出为word
PowerDesigner逆向操作(从mysql5.0生成数据库的物理模型) 环境:powderdesigner12.5:mysql5.0步骤:1. 为指定的数据库配置mysql的ODBC数据源先下载 ...
- 网页中Office和pdf相关文件导出
最近被派去维护和开发一些做了一半.年久失修的项目.有一部分内容是关于word文件导出,顺带着把excel.pdf文件的导出也调研下吧,我想未来开发我应该会遇到的,遂做了下笔记分享给需要的人. 由于项目 ...
- FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...
- 文件/大文件上传功能实现(JS+PHP)全过程
文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...
- C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图
C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图 +BIT祝威+悄悄在此留下版了个权的信息说: 最近需要用OpenGL绘制文字,这是个很费时费力的事.一般的思路就是 ...
- loadrunner实现excel文件导出操作
项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...
- JAVA实用案例之文件导出(JasperReport踩坑实录)
写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...
随机推荐
- SpringBoot简单连接数据库以及查询数据
实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...
- 情景linux—不曾了解的cat用法
情景 cat是linux命令中最为基础的命令之一,它是"concatenate"(连接)的简写,作用概述是concatenate and print files,即:连接和查看文件 ...
- Linux socket网络编程基础 tcp和udp
Socket TCP网络通信编程 首先,服务器端需要做以下准备工作: (1)调用socket()函数.建立socket对象,指定通信协议. (2)调用bind()函数.将创建的socket对象与当前主 ...
- Windows PowerShell漫谈-win7下没有超级终端
Windows PowerShell是我在研究win7新特性的时候发现的新工具,起初没有对它产生太大的兴趣,只是简单看看了有关它的介绍.简单使用了一下,感觉上它和cmd.exe没有本质区别.对它产生兴 ...
- DOS下串口通信程序来传送文件的源代码
接收程序: #include <dos.h>#include <fstream.h>#include <conio.h>#include <stdio.h&g ...
- 如何构造一个简单的USB过滤驱动程序
本文分三部分来介绍如何构造一个简单的USB过滤驱动程序,包括"基本原理"."程序的实现"."使用INF安装".此文的目的在于希望读者了解基本 ...
- FusionCharts 3D环饼图报错
1.在设计FusionCharts 3D环饼图时,出现错误,图显示不出来,具体错误如下图: 2.经过检查,发现声明的变量和下面引用的变量不一致 var doughnut2D = new FusionC ...
- ubuntu 重启命令,ubuntu 重启网卡方法
ubuntu 重启命令 重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shutd ...
- 【mysql】mysql密码设置和更改
密码设置: 当用户没有设置密码时: 添加密码: mysqladmin -uroot -password ab12 注:因为开始时root没有密码,所以-p旧密码一项就可以省略了. 当用户存在密码时: ...
- freemarker报错之十一
1.错误描述 六月 03, 2014 11:00:35 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...