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点击按钮下载文件的更多相关文章

  1. Js点击按钮下载文件到本地(兼容多浏览器)

    实现点击 用纯 js(非jquery)  下载文件到本地 自己尝试,加网上找了好久未果,如: window.open(url)   location.href=url   form表单提交   ifr ...

  2. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  3. 使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  4. js 点击按钮下载图片,另存为

    js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...

  5. 页面点击按钮下载excel(原生js)

    let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...

  6. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  7. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  8. html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  9. markdown实现点击链接下载文件

    今天用Markdown工具,需要实现一个点连接下载文件的功能,看起来很多简单我也没多想就直接写了,并且单个页面测试的时候也挺正常,就发布了,但是发布后使用的时候发现问题了,浏览器中直接点击链接没反应, ...

随机推荐

  1. appium定位之xpath定位

    前面也说过appium也是以webdriver为基的,对于元素的定位也基本一致,只是增加一些更适合移动平台的独特方式,下面将着重介绍xpath方法,这应该是UI层元素定位最强大的方法啦! 以淘宝app ...

  2. OO第一单元自白

    Homework 1  简单多项式导函数 对于初次接触的OO,第一次作业已经可以体会到其与面向过程的C语言之间的差别. 我的想法是,建立了Multinomial和Monomial 两个类,分别能够实现 ...

  3. Python - Windows系统下安装使用virtualenv

    1 - virtualenv https://pypi.python.org/pypi/virtualenv/ https://github.com/pypa/virtualenv 在实际开发测试中, ...

  4. HttpClient和HttpURLConnection的使用和区别(下)

    转自来自点击打开链接 接着上一篇,我们继续来分析HttpURLConnection的使用,以及两者的共同点和区别. 目录 用法 HttpURLConnection 区别 引用资料 用法 HttpURL ...

  5. Java程序员如何运用所掌握的技术构建一个完整的业务架构

    1.通用架构概述 创业之初,我们往往会为了快速迭代出产品,而选择最简单的技术架构,比如LAMP架构,SSH三层架构.这些架构可以适应初期业务的快速发展,但是,随着业务变得越来越复杂,我们会发现这些架构 ...

  6. 使用切片拦截Rest服务

    使用切片拦截Rest服务 1.使用过滤器Filter: 我们可以在建立的springboot的项目中建立新的类来是先Filter的接口,doFilter是过滤器中的主要方法,用来做处理逻辑,最后我们只 ...

  7. SpringMVC redirect中文乱码问题

    在使用"redirect:xxx.do?param=中文"时会出现乱码问题,解决方案如下: 使用model.addAttribute来替代直接拼接参数.如下: @RequestMa ...

  8. window7环境下ZooKeeper的安装运行及监控查看

    原文:http://www.cnblogs.com/RainAndWind/p/4668427.html ZooKeeper是一个分布式开源框架,供了协调分布式应用的基本服务.这些天在使用DUBBO, ...

  9. JavaWeb学习(二十二)———EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...

  10. 初识Scala

    scala 是 scalable Language 的简写,是一门多范式的编程语言. scala是一种纯面向对象的语言每个值都是对象, 同时支持大量的函数式特性. scala运行于Java虚拟机(JV ...