前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件
前台 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 去网络或者文件服务器下载文件的更多相关文章
- 通过指定的 url 去网络或者文件服务器下载文件到本地某个文件夹
/** * 从网络Url中下载文件 * @param urlStr 指定的url * @param fileName 下载文件到本地的名字 * @param savePath 本地保存下载文件的路径 ...
- JQuery中点击超链接动态修改url连接地址无效
这篇随笔的标题真是好拗口,想表达的意思是,当点击超链接后,才去修改超链接的地址,此时超链接仍然链接的是是修改之前的页面,而不是修改之后的页面. 超链接代码如下: <a id="chao ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- 基础框架整合-ssm框架+前后台交互完整教程
1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...
- JavaScript或jQuery模拟点击超链接和按钮
有时候我们需要页面自动点击超链接或者按钮,可以用js或者jQuery利用程序去点击,方法很简单,按钮或超链接代码如下: <a href="url" target=" ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- ajax实现异步前后台交互,模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
- js 点击超链接,执行js脚本,而不进行url跳转
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
随机推荐
- 写在vue总结之前(一)
在大概2016年6月吧,知道了vue,博客园有个博主用vue写了一个不算完整的博客园app,做出来的效果相比博客园原本的app看上去要华丽很多,那时候做前端还没多久,很多东西都不知道,别人说用vue开 ...
- go学习day2
值类型和应用类型 1.值类型:变量直接存储值,内存通常在栈中分配 基本数据类型int.float.bool.string以及数组和struct.如果在函数里面修改了,函数外不变 2.引用类型:变量存储 ...
- java浅析final关键字
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...
- 服务网关zuul之七:zuul中的动态刷新路由配置
<spring扩展点之三:Spring 的监听事件 ApplicationListener 和 ApplicationEvent 用法,在spring启动后做些事情> <服务网关zu ...
- Java-Runoob-高级教程-实例-方法:03. Java 实例 – 汉诺塔算法-un
ylbtech-Java-Runoob-高级教程-实例-方法:03. Java 实例 – 汉诺塔算法 1.返回顶部 1. Java 实例 - 汉诺塔算法 Java 实例 汉诺塔(又称河内塔)问题是源 ...
- C语言强化——链表(2)
目录 链表的应用: 栈 循环队列 C语言实现动态数组 数组实现定长元素个数层次建树 队列实现不定元素个数层次建树 (*) 栈 栈(链表应用) "stack.h" #include ...
- Postgres安装
yum install zlib-devel gcc make #创建用户和组groupadd postgresuseradd -g postgres postgres mkdir -p /usr/l ...
- delphi HTML转义字符编码转换
网上很多把HTML转换成纯文本格式的方法很多思路都是用正则表达式或者分析html代码替换的方法. 本文是利用IE完成转换,即利用IHTMLDocument2接口. Denon天Denon龙Denon ...
- tomcat简单使用(一)
先来说一说tomcat的使用 官网下载tomcat:tomcat,我的百度云上的:tomcat Tomcat分为安装版和解压版:安装版:一台电脑上只能安装一个Tomcat:解压版:无需安装,解压即可用 ...
- MongoDB 的安装以及使用
MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数 ...