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. 如何使用react-redux——傻瓜版

    概述 之前看redux官方文档真是看得一脸懵逼,现在自认为会用了,于是来总结一下用法,供以后开发时参考,相信对其他人也有用. 不得不说,用了redux之后感觉挺爽的,有如下优点: 组件大多是函数组件非 ...

  2. Nginx---(main block)

    正常运行必备配置 1,user USERNAME [GROUPAME] ; 指定用于运行worker进程的用户和组:   user nginx nginx; 2, pid /PATH/TO/PID_F ...

  3. Shell-2--输入输出重定向

    自己写一下吧,免得又忘了,被人问到,被鄙视 0 表示标准输入, 1 表示标准输出 , 2 表示标准错误输出 一个 > 表示已覆盖的方式把命令的正确执行重定向到文件 两个 >> 表示是 ...

  4. Docker - 常用基础命令

    Docker命令分布 帮助信息 查看docker基本信息:docker info 查看docker版本信息:docker version 查看docker的所有命令及选项:docker --help ...

  5. HoloLens开发手记 - HoloLens shell概述 HoloLens shell overview

    使用HoloLens时,shell是由你周围的世界和来自系统的全息图像构成.我们将这种空间成为混合世界(mixed world). shell包含了一个可以让你将全息图像和应用放置在世界中的开始菜单( ...

  6. 06-搭建master集群

    部署高可用 kubernetes master 集群 kubernetes master 节点包含的组件: kube-apiserver kube-scheduler kube-controller- ...

  7. [源码]Delphi 5KB无输入表下载者

    [源码]Delphi 5KB无输入表下载者源码 PROGRAM Fun; type DWORD = LongWord; THandle = LongWord; BOOL = LongBool; LPC ...

  8. PCA降维实验代码

    实验需要提取数据的空间信息,所以要对光谱进行降维,使用主成分分析算法,样例代码备份如下 # -*- coding: utf-8 -*- """ Created on Mo ...

  9. 删除.svn 脱离svn版本控制器

    1.for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q "%%a\.svn" 复制到记事本,将记事本保存为 ...

  10. jsp页面简单的验证码实现

    前段时间赶着结束毕业设计任务,现在完成了.回来补一下设计毕业设计的过程中遇到的问题和解决方案. 为了使小系统更有模有样,这里尝试在登录页面实现验证码功能.现描述一下我的解决方案. 首先看一下实现后的界 ...