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. MySQL 数据类型说明解释

    在 MySQL 中,有三种主要的类型:Text(文本).Number(数字)和 Date/Time(日期/时间)类型. Text 类型: 数据类型 描述 CHAR(size) 保存固定长度的字符串(可 ...

  2. H5内联视频

    概述 微信上很多H5页面都会有会动的像视屏的页面,这样的效果很棒.从技术上来说,这个其实就是视屏,不过没有控制播放的按钮罢了.它们还有一个专业的名字--内联视频.下面我把自己对内联视屏的学习记录下来, ...

  3. [CocoaPods]使用CocoaPods

    将Pod添加到Xcode项目中 在你开始之前 检查Specs存储库或cocoapods.org以确保您要使用的库可用. 在您的计算机上安装CocoaPods. 安装 创建Podfile,并添加依赖项: ...

  4. Testing - 软件测试知识梳理 - 比较质量保证(QA)与质量控制(QC)

    QA QC QM 概念 Quality Assurance (质量保证) Quality Control (质量控制) Quality Manage (质量管理) 定义 为达到质量要求所采取的作业技术 ...

  5. vscode中iview的</Col>标签报错问题

    直接看问题截图: 这是vetur中eslint的问题,在vscode菜单中,文件->首选项->设置 找到 “vetur.validation.template”: true 将其改为fal ...

  6. MD5加密之提取文件的MD5特征码

    public static String encodeFile(String path) { try { MessageDigest digester = MessageDigest.getInsta ...

  7. Nunit测试工具使用

    Nunit是什么 Nunit是一种TDD工具,和Junit一样的! 怎么样获取Nunit 打开Visual Studio工具,然后在菜单栏中的工具->扩展管理器中的联机库中搜索"nun ...

  8. Lucene 7.2.1 自定义Analyzer和TokenFilter

    1.自定义Analyzer: @Test  public void t01() throws Exception {   ArrayList<String> strings = new A ...

  9. RabbitMQ Exchange详解以及Spring中Topic实战

    前言 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的解耦. 业务需求 ...

  10. noip之后的一些感受

    你经历过绝望吗,那种希望完全破碎,眼前看不到光亮,不知道下一步怎么走,不知道接下来应该如何生活的那种绝望? 我经历过. 2018.11.12 下午 秦皇岛到石家庄的高铁上 听着同学兴高采烈的讨论,自己 ...