10.用js下载文件(需要后端链接)
用js下载文件
PS:本文说的,并非如何用js创建流、创建文件、实现下载功能。
而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮、下载文件到本地。(可以是zip啦、excel啦都是一样)
有两个方法:window.open()和通过form表单来提交。
在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html
方法一:window.open("下载文件的后端接口");
*html结构*
<button type="button" id="btn1">下载一个zip(方法1)</button>
<button type="button" id="btn2">下载一个zip(方法2)</button>
/*js部分*/
var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2"); //已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一:window.open()
$eleBtn1.click(function(){
window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
});
然而有个问题:浏览器会打开一个新窗口,然后迅速自动关闭,体验非常不好。
方法二:通过form提交
由于ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接口。
/*js部分*/
//方法二:通过form
$eleBtn2.click(function(){
var $eleForm = $("<form method='get'></form>"); $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master"); $(document.body).append($eleForm); //提交表单,实现下载
$eleForm.submit();
});
10.用js下载文件(需要后端链接)的更多相关文章
- Js下载文件到本地(兼容多浏览器)
在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...
- 两种 js下载文件的步骤
----------------------------------引用地址链接------------------------------------------------- http://www ...
- 使用js下载文件
使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...
- 两种 js下载文件的方法(转)
function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObjec ...
- js 下载文件/导出
const url = '/sasd/fsd/xxxx/exportMailData2Excel'this.downloadFile(url, 'blob', this.isSearch) // 调用 ...
- 两种js下载文件的方法(转)
function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObject("Microsoft.XM ...
- 前端JS下载文件总结
Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...
- [iOS 多线程 & 网络 - 2.10] - ASI框架下载文件
A.ASI框架中的下载 1.实现步骤 在实际的开发中如果要使用asi框架来下载服务器上的文件,只需要执行下面简单的几个步骤即可. (1)创建请求对象:(2)设置下载文件保存的路径:(3)发送下载文件的 ...
- 小谢第10问:前端JS下载文件、表格
对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...
随机推荐
- [No0000176]Git常用命令速查表(收藏大全)
名词 master: 默认开发分支 origin: 默认远程版本库 Index / Stage:暂存区 Workspace:工作区 Repository:仓库区(或本地仓库) Remote:远程仓库 ...
- app相关的一些网站
https://www.qimai.cn 排名排行关键字原aso100
- 转:JDK动态代理为什么必须用接口以及与CGLIB的对比
参考链接: JDK动态代理为什么必须用接口以及与CGLIB的对比 文章中提到:试验了JDK动态代理与CGLIB动态代理.从Spring的AOP框架介绍中得知对于使用接口的类,Spring使用JDK动态 ...
- Linux忘记密码常用的几种解决方法
原文链接:https://www.cnblogs.com/vurtne-lu/p/6550590.html 一. lilo引导1. 在出现 lilo: 提示时键入 linux single Boot: ...
- java 集合(三)List接口
package cn.sasa.demo1; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...
- 什么是HDFS
HDFS是什么:HDFS即Hadoop分布式文件系统(Hadoop Distributed Filesystem),以流式数据访问模式来存储超大文件,运行于商用硬件集群上,是管理网络中跨多台计算机存储 ...
- 【SQL】如何使用SQL like 方法和SQL [charlist] 通配符(SQL like的拓展)
1.like 相关用法 '%a' //以a结尾的数据 'a%' //以a开头的数据 '%a%' //含有a的数据 ‘_a_’ //三位且中间字母是a的 '_a' //两位 ...
- 【UNIX网络编程(三)】TCP客户/server程序演示样例
上一节给出了TCP网络编程的函数.这一节使用那些基本函数编写一个完毕的TCP客户/server程序演示样例. 该样例运行的过程例如以下: 1.客户从标准输入读入一行文本,并写给server. 2.se ...
- RN全局的变量,方法,全局类,全局类方法
为了方便学习,很简单的小Demo,不懂可以下方留言,百分百原创,相互学习,相互进步 全局的方法 创建一个js文件,命名OvallAll //全局的方法 //这里export default 只能输出一 ...
- mui项目中如何使用原生JavaScript代替jquery来操作dom
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...