Ajaxでpostリクエストでファイルダウンロード

4942 ワード

シーンの説明:ファイルのダウンロード、バックグラウンドの要求を呼び出して、一般的に直接formフォームを使って、actionはバックグラウンドのコントローラの経路に対応してできます.しかし、この方法ではバックグラウンドから転送される値は得られません.例えば、ダウンロードしたいファイルが存在しないか、何か意外なことがあってダウンロードに失敗したか、フロントに情報を転送しようとすると、私たちが望んでいる効果は得られません.
 
通常ajax呼び出しファイルのダウンロードも望ましくなく、ファイルが文字化けします.
 
解決方法:ajaxはまずファイルパスを取得する方法を呼び出し、この方法の戻り値に基づいて続行するかどうかを決定し、ファイルが存在する場合はformフォームを組み立て、ダウンロード方法を呼び出すことでファイルダウンロードの効果を実現します.
$.ajax({
    type: "POST",
    url: url,
    data: params,
    success: function(response, status, request) {
        var disp = request.getResponseHeader('Content-Disposition');
        if (disp && disp.search('attachment') != -1) {
            var form = $('
'); $.each(params, function(k, v) { form.append($('')); }); $('body').append(form); form.submit(); } } });

以上のコードは私がstackoverflowの上でひっくり返したもので、この考え方によって、最終的に私の望む効果を実現しました.
js:

    function download(){
         $.ajax({
             url:"existFile.do",
             method:"post",
             data : {
                 employeeId:$("#download-employeeId").val(),
                 termId:$("#download-termId").val(),
                 itemId:$("#download-itemId").val()
             },
             success: function(response, status, request) {
                 var employeeId = $("#download-employeeId").val();
                 var termId = $("#download-termId").val();
                 var itemId = $("#download-itemId").val();
                 var disp = request.getResponseHeader('Content-Disposition');
                if (response=="fail") {
                    alert("        !");
                    return;
                }
                 var form = $('
'); form.append($('')); form.append($('')); form.append($('')); $('body').append(form); form.submit(); } }) }

ファイルが存在するかどうかを判断します.
    /**
     * @Describe           
     * @param employeeId   id
     * @param groupId   id
     * @return          ,     "fail"
     */
    @RequestMapping("existFile")
    @ResponseBody
    public String test(String employeeId, Integer groupId){
        String filePath = null;
        GroupVO groupVO = groupService.getDetailGroup(groupId);
        String termId = groupVO.getTermId();
        String itemId = groupVO.getItemId();
        WorkSummaryFile workSummaryFile = workSummaryService.existWorkSummaryFile(employeeId,Integer.parseInt(termId),Integer.parseInt(itemId));
        if (null!=workSummaryFile) {
            filePath = workSummaryFile.getFilePath();
        }else {
            return "fail";
        }
        return filePath;
    }

ファイルのダウンロード:
    /**
     * @Describe         
     * @param employeeId   id
     * @param groupId   id
     * @param response
     * @return     
     */
    @RequestMapping("downloadFile")
    @ResponseBody
    public String downloadSingleFile(@RequestParam("employeeId")String employeeId,
                                     @RequestParam("groupId")String groupId,
                                     HttpServletResponse response){
        String filePath = null;
        OutputStream outputStream = null;
        GroupVO groupVO = groupService.getDetailGroup(Integer.parseInt(groupId));
        String termId = groupVO.getTermId();
        String itemId = groupVO.getItemId();
        WorkSummaryFile workSummaryFile = workSummaryService.existWorkSummaryFile(employeeId,Integer.parseInt(termId),Integer.parseInt(itemId));
        if (null!=workSummaryFile) {
            filePath = workSummaryFile.getFilePath();
            String fileName = workSummaryFile.getOriginalName();
            try {
                response.addHeader("Content-Disposition","attachment; filename="+ URLEncoder.encode(fileName,"utf-8"));
                outputStream = response.getOutputStream();
                SClient.downloadFileToStream(filePath, outputStream);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else {
            return "fail";
        }
        return "success";
    }