js 实现文件下载/文件导出。
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 实现文件下载/文件导出。的更多相关文章
- FileSaver.js 实现浏览器文件导出
FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况
- FileUtils 文件下载 文件导出
public class FileUtils { /// <summary> /// 文件下载 /// </summary> /// <param name=" ...
- 文件导出也可以这么写【js+blob】
文件导出在软件开发中是个比较常用的功能,基本原理也很简单: 浏览器向后台发送一个Get请求 后台处理程序接收到请求后,经过处理,返回二进制文件流 浏览器接收到二进制文件流后提示下载文件 调用的js方法 ...
- grunt 单独压缩多个js和css文件【转】
原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...
- loadrunner实现excel文件导出操作
项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...
- minify合并js和css文件
压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销:合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力.而这些枯燥又没有技术含量的工作,我们以前通常会手动处 ...
- Jmeter_实现Excel文件导出到本地
一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...
- 构建工具是如何用 node 操作 html/js/css/md 文件的
构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...
- C#中的文件导出大全
s 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButtonL ...
- Node.js之文件下载
Node.js之文件下载,主要最近解决我的一个需求. 需求描述:如何将腾讯云上传的文件存储到本地某个目录下,如果用js来实现,纯JavaScript没有这样的功能(也许有),正好我这个项目用node. ...
随机推荐
- Go的语言特性有哪些
摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 本文主要通过值传递和指针.字符串.数组.切片.集合.面向 ...
- 在行情一般的情况下,就说说23级应届生如何找java工作
Java应届生找工作,不能单靠背面试题,更不能在简历中堆砌和找工作关系不大的校园实践经历,而是更要在面试中能证明自己的java相关商业项目经验.其实不少应届生Java求职者不是说没真实Java项目经验 ...
- Flutter ncnn 使用
Flutter 实现手机端 App,如果想利用 AI 模型添加新颖的功能,那么 ncnn 就是一种可考虑的手机端推理模型的框架. 本文即是 Flutter 上使用 ncnn 做模型推理的实践分享.有如 ...
- ROS的通信机制
通信机制 节点--执行单元 执行具体任务的进程.独立运行的可执行文件: 不同节点可以使用不同的编程语言,可分布式运行在不同的主机上. 节点在系统中的名称是必须是唯一的. 节点管理器(ROS Maste ...
- vulnhub_me and my grilfriend
解题步骤 主机nmap扫描,开放22和80端口 访问该ip,发现只能本地访问 查看源代码,提示需要使用x-forwarded-for的请求头,可以在burp suite中每次添加一个请求头,也可以使用 ...
- 微信小程序+web数据库的开发实践
前言 生活中使用微信小程序的场景越来越多,它实现了用户对于应用"触手可及.用完即走"的理想需求.微信小程序的开发难度也低于APP的开发制作,使用它会更便利.低成本.高经济效益. 但 ...
- tensorflow.js 多分类,机器学习区分企鹅种类
前言: 在规则编码中,我们常常会遇到需要通过多种区间判断某种物品分类.比如二手物品的定价,尽管不是新品没有 SKU 但是基本的参数是少不了.想通过成色来区分某种物品,其实主要是确定一些参数.然后根据参 ...
- Python第三方库pydash功能介绍
Python第三方库pydash功能介绍 本文来自ChatGPT的回答整理 demo部分都验证过ok 介绍 pydash 是一个 Python 库,用于提供类似于 JavaScript 库 lodas ...
- react项目搭建-路由封装
router v6 路由统一管理与添加,对是否登录进行判断. 1.使用脚手架创建项目 新建一个文件夹 ,在文件夹内部打开命令行工具. 执行命令:npx create-react-app 项目名字 将项 ...
- Python 导入 Excel多sheet
Python 导入 Excel多sheet 假设表格的样式如下 import os import sys import django BASE_DIR = os.path.dirname(os.pat ...