最近做项目,使用的技术较老,前端用的架构是jsp,主要技术是jquery、js、css、html等,后端用到的主要是springmvc、存储过程等。
下面是一个文件下载的简单实现。主要是客户在浏览器点击一个pdf文件,进行下载。改文件存在于公司的服务器上。
一、前端代码
1、html代码
<div class="border-gb-title">项目文件</div>
<div class="grey-card jus-c ptb30 flex">
<div class="tc mlr50 cupointer" onclick="getProjectFiles(1)"><img src="/res/images/file.png">
<div class="mt5 fs16">合同</div>
</div>
<div class="tc mlr50 cupointer" onclick="getProjectFiles(2)"><img src="/res/images/file.png">
<div class="mt5 fs16">计划说明书</div>
</div>
<div class="tc mlr50 cupointer" onclick="getProjectFiles(3)"><img src="/res/images/file.png">
<div class="mt5 fs16">风险说明书</div>
</div>
<div class="tc mlr50 cupointer" onclick="getProjectFiles(6)"><img src="/res/images/file.png">
<div class="mt5 fs16">服务协议</div>
</div>
</div>
2、js代码
//获取文件,主要是从数据库获取到:文件名、文件路径
function getProjectFiles(type) {
var fileParam = {
pageNo: 1,
pageSize: 10,
xmId: ${detail[0]["项目ID"]},
cxlx: type,
};
$.ajax({
url: "/prod/getProjectFiles",
type: "POST",
data: fileParam,
dataType: "JSON",
success: function (ret) {
if (ret && ret['code'] > 0) {
debugger
//渲染界面
var dataList = ret['list'];
download(dataList[0]["附件名"],dataList[0]["附件路径"]);
}
}
})
}
//下载文件,调用后端接口
function download(fileName,filePath){
window.open("/downloadTwo?fileName="+encodeURI(fileName)+"&downUrl="+filePath);
return ;
}
3、css样式
前端的所有样式都是使用layui架构的。
二、后台代码
1、获取文件
主要是,调用存储过程,去数据库获取文件名和文件路径,后面用于下载。
@RequestMapping(value = "/getProjectFiles",method = RequestMethod.POST)
@ResponseBody
public DataResultSet getProjectFiles(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap){
int pageNo = ParamUtils.getInt(request, "pageNo", 1); // 页码
int pageSize = ParamUtils.getInt(request, "pageSize", 10); // 取得显示条数
String cxlx = ParamUtils.getString(request, "cxlx", ""); // 查查询类型 1|信托合同 2|信托计划说明书3|认购风险说明书 5|隐私协议|6用户服务协议
String xmId = ParamUtils.getString(request, "xmId", ""); //发行方案id
DataResultSet productHistory = prodService.getProjectFiles(pageNo,pageSize,cxlx,xmId);
return productHistory;
}
2、开始下载
@RequestMapping("/downloadTwo")
public void downloadFileTwo( HttpServletRequest request, HttpServletResponse response) {
String fileName = request.getParameter("fileName");
String downUrl = request.getParameter("downUrl");
goToDownload(request, response, downUrl, fileName);
}
private void goToDownload(HttpServletRequest request, HttpServletResponse response, String downUrl, String fjmc) {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/x-msdownload");
try {
String encodenickname = URLEncoder.encode(fjmc,"UTF-8");//转Unicode不然ie会乱码
response.setHeader("Content-Disposition", "attachment;fileName=" + new String(encodenickname.getBytes("UTF-8"), "ISO8859-1"));
//这里注掉的代码是本地测试的
// String path = request.getSession().getServletContext().getRealPath("/");
// String ATTACH_PATH= AppConfig.getInstance().getProperty("attach.base","");
// if (StringUtils.isNotEmpty(ATTACH_PATH)) {
// path = ATTACH_PATH;
// }
// logger.debug("=path===" + path);
File file = new File( downUrl);
if (!file.exists()) {
response.sendError(404, "File not found!");
return;
}
long fileLength = file.length();
response.setHeader("Content-Length", String.valueOf(fileLength));
BufferedInputStream bis = new BufferedInputStream(new FileInputStream(file));
BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
byte[] buff = new byte[2048];
int bytesRead;
while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
bos.write(buff, 0, bytesRead);
}
bis.close();
bos.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
三、效果
直接点击文件图片或者文件,就可以下载。
上面测试,是在谷歌浏览器,火狐,IE也测试过了,亲测有效。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。