目录

• 一、前端代码
• 1、html代码
• 2、js代码
• 3、css样式
• 二、后台代码
• 1、获取文件
• 2、开始下载
• 三、效果

最近做项目，使用的技术较老，前端用的架构是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、获取文件

主要是，调用存储过程，去数据库获取文件名和文件路径，后面用于下载。

 /**
     * 获取项目文件
     *   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;
    }

2、开始下载

 /**
     * 附件下载
     *
     * @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也测试过了，亲测有效。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。