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工具,需要实现一个点连接下载文件的功能,看起来很多简单我也没多想就直接写了,并且单个页面测试的时候也挺正常,就发布了,但是发布后使用的时候发现问题了,浏览器中直接点击链接没反应, ...
随机推荐
- 如何使用react-redux——傻瓜版
概述 之前看redux官方文档真是看得一脸懵逼,现在自认为会用了,于是来总结一下用法,供以后开发时参考,相信对其他人也有用. 不得不说,用了redux之后感觉挺爽的,有如下优点: 组件大多是函数组件非 ...
- Nginx---(main block)
正常运行必备配置 1,user USERNAME [GROUPAME] ; 指定用于运行worker进程的用户和组: user nginx nginx; 2, pid /PATH/TO/PID_F ...
- Shell-2--输入输出重定向
自己写一下吧,免得又忘了,被人问到,被鄙视 0 表示标准输入, 1 表示标准输出 , 2 表示标准错误输出 一个 > 表示已覆盖的方式把命令的正确执行重定向到文件 两个 >> 表示是 ...
- Docker - 常用基础命令
Docker命令分布 帮助信息 查看docker基本信息:docker info 查看docker版本信息:docker version 查看docker的所有命令及选项:docker --help ...
- HoloLens开发手记 - HoloLens shell概述 HoloLens shell overview
使用HoloLens时,shell是由你周围的世界和来自系统的全息图像构成.我们将这种空间成为混合世界(mixed world). shell包含了一个可以让你将全息图像和应用放置在世界中的开始菜单( ...
- 06-搭建master集群
部署高可用 kubernetes master 集群 kubernetes master 节点包含的组件: kube-apiserver kube-scheduler kube-controller- ...
- [源码]Delphi 5KB无输入表下载者
[源码]Delphi 5KB无输入表下载者源码 PROGRAM Fun; type DWORD = LongWord; THandle = LongWord; BOOL = LongBool; LPC ...
- PCA降维实验代码
实验需要提取数据的空间信息,所以要对光谱进行降维,使用主成分分析算法,样例代码备份如下 # -*- coding: utf-8 -*- """ Created on Mo ...
- 删除.svn 脱离svn版本控制器
1.for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q "%%a\.svn" 复制到记事本,将记事本保存为 ...
- jsp页面简单的验证码实现
前段时间赶着结束毕业设计任务,现在完成了.回来补一下设计毕业设计的过程中遇到的问题和解决方案. 为了使小系统更有模有样,这里尝试在登录页面实现验证码功能.现描述一下我的解决方案. 首先看一下实现后的界 ...