1. POST方式进行文件导出;

  // url 下载URL
// fileName 下载文件名称
function exportFile(url, fileName) {
let xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.responseType = "blob";
xhr.onload = () => {
let ctx = xhr.response;
let blob = new Blob([ctx]);
if ("msSaveOrOpenBlob" in navigator) {//兼容IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
let aLink = document.createElement("a");
aLink.download = fileName;
aLink.style.display = "none";
aLink.href = URL.createObjectURL(blob);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
}
};
xhr.send();
}

使用方法:exportFile(url,fileName);

使用Angular方式进行导出:

class ExportEvent {
constructor( private http:HttpClient ){}
// url 下载URL
// fileName 下载文件名称
exportFile(url,fileName){
this.http.request("POST",url,{},{responseType:"blob"}).pipe()
       .subscribe(
(res)=>{
let blob = new Blob([res]);
if ("msSaveOrOpenBlob" in navigator) {//兼容IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
let aLink = document.createElement("a");
aLink.download = fileName;
aLink.style.display = "none";
aLink.href = URL.createObjectURL(blob);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
} },
(error)=>{
let reader = new FileReader();
reader.onload = (e)=>{
if(e && e["target"]){
let errorMsg = JSON.parse(e["target"]["result"]);
if(errorMsg && errorMsg["code"]){
console.log("有报错,出错了。。。。。");
}
}
}
//error.error的值是一个Blob对象
reader.readAsText(error.error);
}
       );
}
}

2. GET方式进行文件导出;

// url 下载路径
window.location = url;

js 实现文件下载/文件导出。的更多相关文章

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

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

  2. FileUtils 文件下载 文件导出

    public class FileUtils { /// <summary> /// 文件下载 /// </summary> /// <param name=" ...

  3. 文件导出也可以这么写【js+blob】

    文件导出在软件开发中是个比较常用的功能,基本原理也很简单: 浏览器向后台发送一个Get请求 后台处理程序接收到请求后,经过处理,返回二进制文件流 浏览器接收到二进制文件流后提示下载文件 调用的js方法 ...

  4. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

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

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

  6. minify合并js和css文件

    压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销:合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力.而这些枯燥又没有技术含量的工作,我们以前通常会手动处 ...

  7. Jmeter_实现Excel文件导出到本地

    一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...

  8. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  9. C#中的文件导出大全

    s 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButtonL ...

  10. Node.js之文件下载

    Node.js之文件下载,主要最近解决我的一个需求. 需求描述:如何将腾讯云上传的文件存储到本地某个目录下,如果用js来实现,纯JavaScript没有这样的功能(也许有),正好我这个项目用node. ...

随机推荐

  1. 深入探索 Django Rest Framework

    这篇文章会详细介绍Django REST Framework的核心组成部分,包括Serializers.ViewSets.Routers.权限和认证系统以及测试和调试工具.文章从基础开始,逐步深入,旨 ...

  2. Chrome浏览器,有道云笔记的网页剪报需要多次登录且收藏失败报错

    报错代码 {"canTryAgain":false,"scope":"SECURITY","error":"2 ...

  3. Day01_Java作业

    A:选择题 1:下列标识符哪个是合法的(a) A.class B.$abc C.1234 D.Car.taxi B:填空题 1: java源程序的扩展名是( .java ) 2: java程序经编译后 ...

  4. Map集合_HashMap_TreeMap_等_小记

    Map是一种依照键值对数据存储元素的容器. Map中的元素是两个对象,一个对象作为键,一个对象作为值.一个键(key)和它对应的值构成map集合中的一个元素.Map集合的数据结构只跟键有关,键不可以重 ...

  5. 云储存选择做Hexo博客图床(腾讯云、七牛云、网易云)

    前言 博客里需要添加很多图片作为内容的补充,但是把图片放在本地博客文件夹里,上传到网上后,加载这些图片就是一个很大的问题,他们会拖累网页加载的速度,所以建议把图片放图床里,通过外链来访问和加载这些图片 ...

  6. 【NestJS系列】核心概念:Controller控制器

    前言 控制器主要是用来处理客户端传入的请求并向客户端返回响应. 它一般是用来做路由导航的,内部路由机制控制哪个控制器接收哪些请求. 路由 为了创建基本控制器,我们需要使用@Controller装饰器, ...

  7. 小白也能看懂的 ROC 曲线详解

    作者:PrimiHub-Kevin ROC 曲线是一种坐标图式的分析工具,是由二战中的电子和雷达工程师发明的,发明之初是用来侦测敌军飞机.船舰,后来被应用于医学.生物学.犯罪心理学. 如今,ROC 曲 ...

  8. vs code 上传代码到码云

    git init //初始化git仓库 git add . //添加所有文件到git暂存区 git add README.md(如果项目中没有这个文件,会在后面几个操作中报错,解决方法是通过命令合并: ...

  9. 关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式

    前言: 在实际开发过程中,尤其是小程序的开发,我们常常会遇到一些在文档中解决不了的问题,在这里,我就浅谈一下我遇到的一些问题 1.小程序的构建框架是uni-app,却突然被要求用原生的微信小程序代码来 ...

  10. 你知道ES6中的这些属性吗

    ES6,也称ESMAScript2015,这个版本增加了很多好用的特性 变量声明 ES6之前用var来定义变量,ES6增加了两个变量声明的方式,分别为const和let,const用来定义常量,let ...