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. ...
随机推荐
- WebSSH远程管理Linux服务器、Web终端窗口自适应(二)
上一篇:Gin+Xterm.js实现WebSSH远程Kubernetes Pod 支持用户名密码认证 支持SSH密钥认证 支持Web终端窗口自适应 支持录屏审计 Go SSH golang.org/x ...
- 2021级HAUT新生周赛题解汇总
2021级HAUT新生周赛(一)题解@张君毅:第一场 2021级HAUT新生周赛(二)题解@李亚凯:第二场 2021级HAUT新生周赛(三)题解@李晨曦:第三场 2021级HAUT新生周赛(四)题解@ ...
- Llama2 论文中译版——开放式基础和微调聊天模型
Llama 2:开放式基础和微调聊天模型 写在前头 因为最近一直在使用 LLM 工具,所以在学习 Llama 2:开放式基础和微调聊天模型 这篇论文的期间,顺手将内容翻译了过来. 整片译文是由 Cha ...
- tensorflow-2.7-M1-安装依赖openblas问题
问题描述 安装过程 conda create -n conda-forge-tensorflow conda-forge::tensorflow conda info -e conda activat ...
- centos7离线安装harbor
前言 harbor是一个docker私有仓库,基于docker官方的registry,提供GUI.权限控制.项目管理等功能. 安装harbor前,需要先安装docker和docker-compose ...
- 干货分享:用ChatGPT调教批量出Midjourney咒语,出图效率Nice ,附资料。
Prompts就是AI绘图的核心竞争力. 您是不是觉得用Midjourney生成的图不够完美? 又让ChatGPT去生成Prompt,然后效果还不理想? 其实ChatGPT你给他投喂资料后,经过调教的 ...
- Pytest 框架执行用例流程浅谈
背景: 根据以下简单的代码示例,我们将从源码的角度分析其中的关键加载执行步骤,对pytest整体流程架构有个初步学习. 代码示例: import pytest def test_add(): asse ...
- 单节点 RAID6 可靠性模型
介绍 独立磁盘冗余阵列(Redundant Arrays of Independent Disks, RAID)是存储业界为保证数据可用性.可靠性和完整性所采用的重要技术,即使在分布式多副本如此流行和 ...
- QA|Pycharm中的git分支提交冲突问题和解决|GIT
前天,Pycharm中的git分支提交冲突了,原因是我PC上改了文件没有提交,笔记本又本地改代码,笔记本提交时就出现报错:提交拒绝,但pull也被拒绝,网上试了rebase等方法,均没得到解决,最终自 ...
- ATtiny88初体验(七):TWI
ATtiny88初体验(七):TWI TWI模块介绍 ATtiny88的TWI模块兼容Phillips I2C以及SMBus,支持主从模式,支持7bit地址,最大允许128个不同的从机地址.在多主机模 ...