前台 VUE 界面:

<el-table-column prop="attachment" align="center" label="附件详情">
<template slot-scope="scope">
<!--<el-button @click="downloadFile(scope.row.fileName,scope.row.fileUrl)">{{scope.row.fileName}}</el-button>-->
<a @click="downloadFile(scope.row.fileName,scope.row.fileUrl)">{{scope.row.fileName}}</a>
</template>
</el-table-column>
//window.open打开一个新的浏览器窗口,通过 url 对后台的 rest 接口进行调用
downloadFile(fileName,fileUrl){
let param = {"fileUrl": fileUrl, "fileName": fileName};
  window.open(
  downloadManage.downloadFile(param),
  this.openType
);
},
/* 下载文件,对参数 url 和 fileName 进行拼接处理,然后通过 window.open 对后台的 rest 接口进行调用 */
export const downloadManage = {
downloadFile: (query) => requestGetUrl('/process/downloadFile.do_', query, 'post'),
};

后台java代码:(rest接口,供前台进行调用)

  /**
* 下载文件
*
* @return
*/
@RequestMapping("/downloadFile.do_")
@ResponseBody
public void downloadFile(
HttpServletResponse response,
@RequestParam String fileUrl,
@RequestParam String fileName
) {
downLoadFromUrl(fileUrl,fileName,response);
} /**
* 从网络Url中下载文件
* @param urlStr 指定的url
* @param fileName 下载文件完成要叫的名字
* @param response
*/
public static void downLoadFromUrl(String urlStr,String fileName,HttpServletResponse response){ try {
URL url = new URL(urlStr);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
    
     //增加头部,说明该文件为附件,只能进行下载,不直接读
response.setContentType("application/x-msdownload; charset=UTF-8");
response.setHeader("Content-Disposition", "attachment; filename=" + fileName); //得到输入流
InputStream inputStream = conn.getInputStream(); BufferedInputStream bis = new BufferedInputStream(inputStream);
OutputStream os = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(os);
/* ContentLength必须设置,否则文件下载不全
* 或者调用 BufferedOutputStream#write(byte[] b, int off, int len) 方法输出
*/
response.setContentLength(bis.available());
byte[] b = new byte[1024];
while(bis.read(b) != -1) {
bos.write(b);
}
bos.flush(); LOGGER.info("info:"+fileName+" download success");
} catch (IOException e) {
LOGGER.error("uploadFile failed", e);
} }

注意:上面的方法有一个小问题:用过url去网络获取 inputStream 是一点一点不断获取,获取的过程中就去写这个 inputStream  ,则 inputStream  还没有获取完就写了,导致文件最后有缺失,所以可以给 inputStream 加一个同步锁synchronized,就能使 inputStream  全部获取完并写,这样就能获取完整的 inputStream 并写下来,就能下载一个完整的文件

public static void  downLoadFromUrl(String urlStr,String fileName,HttpServletResponse response){

        URL url = null;
HttpURLConnection conn = null;
try {
url = new URL(urlStr);
conn = (HttpURLConnection)url.openConnection();
}catch (Exception e) {
LOGGER.error("HttpURLConnection failed", e);
}
try (
InputStream inputStream = conn.getInputStream();
BufferedInputStream bis = new BufferedInputStream(inputStream);
OutputStream os = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(os);
) {
//未知上传的文件类型设置ContentType 和 Header
response.setContentType("application/octet-stream; charset=UTF-8");
response.setHeader("Content-Disposition", "attachment; filename=" + new String(fileName.getBytes(),"ISO8859-1")); //同步块,同步 inputStream ,边获取 inputStream 边写,一直到全部获取完 inputStream
synchronized (inputStream) {
byte[] b = new byte[1024];
int count = 0;
int len;
while((len = bis.read(b)) != -1) {
bos.write(b, 0, len);
count++;
}
bos.flush();
//多少 Kb 大小的文件,则循环多少次,为count值
LOGGER.info("write BufferedOutputStream:" + count);
LOGGER.info("info:" + fileName + " download success");
}
} catch (Exception e) {
LOGGER.error("uploadFile failed", e);
} }

会出现如下通常我们网上点击某超链接下载文件的效果:(下载完成出现在浏览器页面左下角)

前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件的更多相关文章

  1. 通过指定的 url 去网络或者文件服务器下载文件到本地某个文件夹

    /** * 从网络Url中下载文件 * @param urlStr 指定的url * @param fileName 下载文件到本地的名字 * @param savePath 本地保存下载文件的路径 ...

  2. JQuery中点击超链接动态修改url连接地址无效

    这篇随笔的标题真是好拗口,想表达的意思是,当点击超链接后,才去修改超链接的地址,此时超链接仍然链接的是是修改之前的页面,而不是修改之后的页面. 超链接代码如下: <a id="chao ...

  3. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  4. 基础框架整合-ssm框架+前后台交互完整教程

    1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...

  5. JavaScript或jQuery模拟点击超链接和按钮

    有时候我们需要页面自动点击超链接或者按钮,可以用js或者jQuery利用程序去点击,方法很简单,按钮或超链接代码如下: <a href="url" target=" ...

  6. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  7. ajax实现异步前后台交互,模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  8. 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)

    1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...

  9. js 点击超链接,执行js脚本,而不进行url跳转

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

随机推荐

  1. bzoj4480: [Jsoi2013]快乐的jyy

    [问题描述] 给定两个字符串A和B,表示JYY的两个朋友的名字.我们用A(i,j)表示A 字符串中从第i个字母到第j个字母所组成的子串.同样的,我们也可以定义B(x,y). JYY发现两个朋友关系的紧 ...

  2. bzoj4948: World Final2017 A

    求简单多边形内的最长线段长度 显然存在一组最优解,使其所在直线经过多边形的两个端点,枚举这两个端点,求出直线和多边形的有效交点,从而得出直线有哪些部分在多边形内(含边界). 由于多边形的一些边可能与直 ...

  3. spring boot (入门简介 demo)

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过 ...

  4. java1.8新特性(一)

    一直在更新java 版本,原来也没有关注java版本的变化 引入的一些新的api  引起注意的还是  关于一些并发包的使用,那时候才对每个版本的特性 去了解了一下,虽然 不一定都用上了,但是不管学习什 ...

  5. is与==

     is和==的区别 1. id() 通过id()我们可以查看到⼀一个变量表示的值在内存中的地址. a1 = 100 b1 = 100 print(id(a1),id(b1)) #14071247240 ...

  6. UI 性能因素考虑

    浏览器的最大并发连接数一般在4到6之间,首先了解影响加载的性能因素: (1)下载的文件太大 (2)发出的请求太多 (3)请求相应不及时 针对这些因素,一般会考虑减少请求次数: (1)对静态文件设置缓存 ...

  7. ip route 命令详解

    linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...

  8. ODBC数据源管理器-》系统DSN-》没有....Microsoft Access Driver(*mdb,*,accdb)

    问题如标题: 解决方法:打开目录:“C:\Windows\SysWOW64”,双击该目录下的“odbcad32.exe”文件,就进去ODBC数据源管理界面了,现在这个界面中就有access的驱动了!

  9. MySQL中授权(grant)和撤销授权(revoke

    MySQL 赋予用户权限命令的简单格式可概括为:   grant 权限 on 数据库对象 to 用户   一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利 grant s ...

  10. 学习js第二天小结

    if-else if       ---------适用于区间范围的判断 If(判断条件--一般是boolean类型的值或是关系表达式或是逻辑表达式 ){ 要执行的代码; }else if(判断条件) ...