最近做项目,使用的技术较老,前端用的架构是jsp,主要技术是jquery、js、css、html等,后端用到的主要是springmvc、存储过程等。
下面是一个文件下载的简单实现。主要是客户在浏览器点击一个pdf文件,进行下载。改文件存在于公司的服务器上。
<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>
//获取文件,主要是从数据库获取到:文件名、文件路径 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 ; }
前端的所有样式都是使用layui架构的。
主要是,调用存储过程,去数据库获取文件名和文件路径,后面用于下载。
/** * 获取项目文件 * I_CXLX IN NUMBER, --查询类型 1|信托合同 2|信托计划说明书3|认购风险说明书 5|隐私协议|6用户服务协议 * I_XSXM IN NUMBER --发行方案id * @param request * @param response * @param modelMap * @return */ @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; }
/** * 附件下载 * * @param request * @param response */ @RequestMapping("/downloadTwo") public void downloadFileTwo( HttpServletRequest request, HttpServletResponse response) { String fileName = request.getParameter("fileName"); String downUrl = request.getParameter("downUrl"); goToDownload(request, response, downUrl, fileName); } /** * 下载 * * @param request * @param response * @param downUrl 下载的路径 * @param fjmc 下载文件的名称 */ 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也测试过了,亲测有效。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。