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. 最为常用的Laravel操作(2)-路由

    基本路由 // 接收一个 URI 和一个闭包 Route::get('hello', function () { return 'Hello, Laravel'; }); // 支持的路由方法 Rou ...

  2. 如何动态修改 spring aop 切面信息?让自动日志输出框架更好用

    业务背景 很久以前开源了一款 auto-log 自动日志打印框架. 其中对于 spring 项目,默认实现了基于 aop 切面的日志输出. 但是发现一个问题,如果切面定义为全切范围过大,于是 v0.2 ...

  3. [nginx]proxy_cache缓存系统

    前言 proxy_cache是nginx内置的一个缓存系统,可实现减小后端负载的作用. 常用参数说明 参数 说明 proxy_cache_path 缓存文件路径.level表示目录层级,1:2表示两个 ...

  4. 应用程序通过 Envoy 代理和 Jaeger 进行分布式追踪(一)

    Istio 支持通过 Envoy 代理进行分布式追踪,代理自动为其应用程序生成追踪 span,只需要应用程序转发适当的请求上下文即可.Istio 支持很多追踪系统,包括 Zipkin, Jaeger, ...

  5. 十年磨一剑的华为云GES,高明在哪

    本文分享自华为云社区<华为云GES:十年磨一剑,打造业界一流的云原生分布式图数据库>,作者:GES图引擎服务小图 . 1.浅谈云原生图数据库 图数据库(graph database)是一个 ...

  6. 利用AI点亮副业变现:5个变现实操案例的启示

    整体思维导图: 在这里先分享五个实操案例: 宝宝起名服务 AI科技热点号 头像壁纸号 小说推广号 流量营销号 你们好,我是小梦. 最初我计划撰写一篇关于AI盈利策略的文章,对AI目前的技术走向.应用场 ...

  7. 《CTFshow-Web入门》05. Web 41~50

    @ 目录 web41 题解 原理 web42 题解 原理 web43 题解 原理 web44 题解 原理 web45 题解 原理 web46 题解 原理 web47 题解 web48 题解 web49 ...

  8. 基于 JMeter API 开发性能测试平台

    背景: JMeter 是一个功能强大的性能测试工具,若开发一个性能测试平台,用它作为底层执行引擎在合适不过.如要使用其API,就不得不对JMeter 整个执行流程,常见的类有清楚的了解. 常用的 JM ...

  9. 全局多项式(趋势面)与IDW逆距离加权插值:MATLAB代码

      本文介绍基于MATLAB实现全局多项式插值法与逆距离加权法的空间插值的方法,并对不同插值方法结果加以对比分析. 目录 1 背景知识 2 实际操作部分 2.1 空间数据读取 2.2 异常数据剔除 2 ...

  10. 解决SVN死锁问题

    svn执行clean up后出现提示:svn cleanup failed–previous operation has not finished; run cleanup if it was int ...