目錄

• 一、前端程式碼
• 1、html程式碼
• 2、程式碼
• 3、樣式
• 二、後臺程式碼
• 1、獲取檔案
• 2、開始下載
• 三、效果

最近做專案，使用的技術較老，前端用的架構是jsp，主要技術是、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("fileNamehttp://www.cppcns.com");
        String downUrl = request.getParameter("downUrl");
        goToDownload(request,response,downUrl,fileName);
    }
    /**
     * 下載
     *
     * @p客棧aram request
     * @param response
     * @param downUrl  下載的路徑
     * @param fjmc     下載檔案的名稱
     */
    private void goToDownload(HttpServletRequest request,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.TgLXhmhbTgetOutputStream());
            byte[] buff = new byte[2048];
            int bytesRead;
            while (-1 != (bytesRead = bis.read(buff,buff.length))) {
                bos.write(buff,bytesRead);
            }
            bis.close();
            bos.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

三、效果

直接點選檔案圖片或者檔案，就可以下載。

上面測試，是在谷歌瀏覽器，火狐，IE也測試過了，親測有效。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。