JS点击按钮下载文件
1、最开始的采取的做法是window.open和window.location.href这两种形式请求后台下载文件的,前台代码:
$BTN.click(function(){
var videoUrl = $("#videoUrl").val();
window.open(projectPath + '/downloadResource?url='+videoUrl );
})
- 存在问题:
当下载文件不存在时就会出现页面加载失败的情况。采用window.open这种方式就会打开一个新的窗口页面出现请求失败;采用window.location.href这种形式就会在当前页面直接跳转,然后显示页面加载失败的情况。
2、优化后通过form表单提交:
由于ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接口。
/*js部分*/
$Btn.click(function(){
var videoUrl = $("#videoUrl").val();
var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action",projectPath + '/downloadResource?');
// 隐藏域传递参数
$eleForm.append($("<input></input>").attr("type", "hidden").attr("name", "url").attr("value", videoUrl));
$(document.body).append($eleForm);
//提交表单,实现下载
$eleForm.submit().remove();
});
参考网址:https://www.cnblogs.com/hamsterPP/p/6763458.html
http://www.baikeyang.com/code/97427.html
JS点击按钮下载文件的更多相关文章
- Js点击按钮下载文件到本地(兼容多浏览器)
实现点击 用纯 js(非jquery) 下载文件到本地 自己尝试,加网上找了好久未果,如: window.open(url) location.href=url form表单提交 ifr ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- js 点击按钮下载图片,另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- 页面点击按钮下载excel(原生js)
let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...
- JS点击按钮弹出窗口
由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
- JS点击按钮打开新的独立页面
工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- markdown实现点击链接下载文件
今天用Markdown工具,需要实现一个点连接下载文件的功能,看起来很多简单我也没多想就直接写了,并且单个页面测试的时候也挺正常,就发布了,但是发布后使用的时候发现问题了,浏览器中直接点击链接没反应, ...
随机推荐
- 设计模式总结(Java)—— 单例模式
1. 定义 为了确保一个类有且仅有一个实例,而且自行实例化并向整个系统提供这个实例. 2. 使用场景 确保某个类有且只有一个对象的场景,避免产生多个对象消耗过多的资源,或者某种类型的对象只应该有且只有 ...
- Java 虚拟机的对象创建
堆中存储的内容:在程序运行时,动态创建的对象. 创建对象的四种方式:new,clone(浅复制),反射,反序列化. 浅复制:只能复制当前对象本身,如果当前对象(A)引用了另外的对象(B),则引用对象( ...
- 再次理解HTTP请求过程[概念原理篇]
我曾多次阅读http协议,但是理解依然不深,在此,再次阅读,再次理解.加深两点:解析头部信息\r\n,分解头部和主体用\r\n\r\n.之所以一次请求会看到网络里有很多请求,是因为浏览器代替访问了多次 ...
- mongodb3.x主从配置及备份
本文将介绍下mongodb主从配置及备份 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...
- 【转】ASP.NET Core MVC 配置全局路由前缀
本文地址:http://www.cnblogs.com/savorboard/p/dontnet-IApplicationModelConvention.html作者博客:Savorboard 前言 ...
- 使用 Portainer UI 管理 Docker 主机
Docker 使用命令行的方式来管理有时候并没有那么直观,可以使用 Portainer 的 UI 来管理 Docker 主机和 Docker Swarm 集群. 安装 Portainer 环境:cen ...
- OpenGL10-骨骼动画原理篇(1)
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 本例程展示如何建立骨骼动画,有些人叫蒙皮动画 定义如下: 当前 ...
- nginx介绍 - 部署到linux中
前言: tomcat理论并发处理能力, 大概500左右吧, 即使通过一些优化, 能提升一点, 但是, 并不能达到质变, 最多涨几百. 对于非互联网项目, 确实够用了. 在企业中, 如果要达到500并发 ...
- [转]谈谈Java中"=="与"equals()"
equals是Object超类中的一个方法,这个方法的实现就是通过==号实现的,==号比较的是两个对象的地址是否相同,在代码中体现出来就是比较两个对象引用中保存的地址是否相同,==能够判断的只是两个对 ...
- 进程间通信IPC-管道
管道是UNIX系统IPC的最古老的形式,所有的UNIX系统都提供此通讯机制.管道有以下两种局限性: 1, 历史上,它们是半双工的(即数据只能在一个方向上流动).现在某些系统提供了全双工管道,但是为了最 ...