서버에 POST하고 PDF를 수신하여 jQuery를 사용하여 사용자에게 전달

서버에 POST하고 PDF를 수신하여 jQuery를 사용하여 사용자에게 전달

사용자가 PDF를 얻기 위해 클릭하는 링크가 있습니다.jQuery에서는 서버에 대한 POST ajax 호출을 생성하여 PDF를 가져옵니다.PDF에는 올바른 콘텐츠헤더 등이 첨부되어 있기 때문에 브라우저가 Reader 플러그인을 열거나 사용자가 PDF를 저장할 수 있습니다.

ajax 콜이 포함된 PDF를 받기 때문에 OnSuccess 콜백에서 얻은 데이터를 어떻게 해야 할지 잘 모르겠습니다.받은 데이터를 브라우저에 전달하고 PDF 응답으로 기본 작업을 수행할 수 있도록 하려면 어떻게 해야 합니까?

Ajax와 같은 파일 다운로드를 요청하기 위한 jQuery 플러그인 보기

★★★plugin삼십 三십 명

이 콜은 jquery ajax 콜과 거의 비슷합니다.

$.download('/export.php','filename=myPDF&format=pdf&content=' + pdfData );

물론 이러한 다운로드와 마찬가지로 서버 측에서 content-type 헤더와 Content-Disposition 헤더를 설정해야 합니다.

자바에서는 이런 걸 하겠지만

response.setContentType("application/pdf");
response.setHeader("Content-Disposition", "attachment; filename="exported.pdf");

jQuery는 전혀 필요 없습니다.통상, 폼을 사용해 POST 를 송신해, 서버측에서 HTTP 헤더를 추가합니다.

Content-Disposition: attachment; filename="whatever.pdf"

브라우저가 기본 동작을 수행합니다.

또는 PDF 생성 중에 발생할 수 있는 오류를 보고하는 데 더 주의를 기울이려면 이 작업을 수행할 수 있습니다.jQuery를 사용하여 파라미터를 서버에 게시합니다.서버에서 바이너리 콘텐츠를 생성하여 몇 분간 캐시하고 사용자 세션에 입력한 키를 사용하여 액세스할 수 있도록 한 후 페이지에 "성공" Ajax 응답을 반환합니다(또는 오류가 있으면 "오류" 응답을 반환합니다).페이지가 성공 응답을 받으면 다음과 같은 작업을 즉시 수행할 수 있습니다.

window.location = "/get/my/pdf";

그런 다음 서버는 캐시된 PDF 콘텐츠를 반환합니다.위와 같이 Content-Disposition 헤더를 포함해야 합니다.

"jQuery Plugin for Requesting Ajax like File Downloads"라는 답변은 올바른 방향으로 진행되었지만 검색 조건/필터 데이터로 전달해야 하는 복잡한 개체와 개체 배열이 있기 때문에 완전히 제 상황에 맞는 것은 아니었습니다.다른 사람도 이런 상황에 처할 경우를 대비해서 내 코드를 공유해야겠다고 생각했어요.

$.download = function (url, data, method) {
    if (url && data) {
        //convert the data object into input HTML fields
        var inputs = '';
        var convertToInput = function (key, keyStr, obj) {
            if (typeof obj === 'undefined') {
                return;
            } else if (typeof obj === "object") {
                for (var innerKey in obj) {
                    if (obj.hasOwnProperty(innerKey)) {
                        var innerKeyStr = '';
                        if (keyStr === '') {
                            innerKeyStr = innerKey.toString();
                        } else {
                            innerKeyStr = keyStr + "[" + innerKey.toString() + "]";
                        }
                        convertToInput(innerKey, innerKeyStr, obj[innerKey]);
                    }
                }
                return;
            } else if ($.isArray(obj)) {
                obj.forEach(function (item) {
                    convertToInput(key, keyStr + "[]", item);
                });
                return;
            }

            inputs += "<input type='hidden' name='" + keyStr + "' value='" + obj + "' />";
        };
        convertToInput(null, '', data);

        //send request
        jQuery('<form action="' + url + '" method="' + (method || 'post') + '">' + inputs + '</form>').appendTo('body').submit().remove();
    };
};
$.download('/api/search?format=csv', searchData, 'POST');

큰 차이는 없을지도 모르지만, 컨텍스트를 제공하기 위해 WebAPI, MVC4, nHibernate를 호출하는 javascript와 knockout UI를 가지고 있습니다.쿼리 문자열의 'format=csv' 부분은 MediaTypeFormatter를 트리거하여 반환된 모델을 CSV 파일 형식으로 변환합니다.이 기능을 끄면 API에서 모델을 가져와 Slik 그리드에 표시할 수 있습니다.

도 같은 , 「이러다」 「이러다」 「이러다」 「이러다」를 해 주세요.RESTFUL webservice복잡한 데이터 오브젝트를 가지고 있는 경우, 그 오브젝트를 게시해야 합니다.

jQuery Plugin(jQuery 플러그인)의 temp 공식입니다., 콘텐츠)를한 파라미터로 합니다.AngularJS, ''와 동작합니다.jQuery.param()

Javascript:

$('<form target="_blank" action="' + appConstants.restbaseurl + '/print/pdf" method="POST">' + 
    "<input name='data' value='" + angular.toJson($scope.versicherung) + "' />" +
    '</form>').appendTo('body').submit().remove();

에서는, 「」를 사용하고 있습니다.CXF REST Service an JACKSON★★★★★★★★★★★★★★★★★★:

스프링 구성:

<jaxrs:server id="masterdataService" address="/">
    <jaxrs:serviceBeans>
        <ref bean="printRestServiceBean" />
    </jaxrs:serviceBeans>
    <jaxrs:providers>
        <bean class="org.codehaus.jackson.jaxrs.JacksonJsonProvider" />
        <bean class="de.controller.ExceptionHandler" />
    </jaxrs:providers>
</jaxrs:server>

컨트롤러에서 param을 추출하여 Java Pojo로 변환합니다.

package de.controller;

import javax.ws.rs.Consumes;
import javax.ws.rs.FormParam;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;


@Path(Constants.PRINT_PATH)
@Consumes({ MediaType.APPLICATION_JSON, "application/x-www-form-urlencoded"})
@Produces("application/pdf; charset=UTF-8")
public class PrintRestController {

    @Autowired
    private PrintService printService;

    @POST
    @Produces("application/pdf")
    @Path("/pdf")
    public Response getPDF(@FormParam("data") String data) {
        return printService.getPDF(json2Versicherung(data));
    }

    private Versicherung json2Versicherung(String data) {
        Versicherung lVersicherung = null;
        try {
            ObjectMapper mapper = new ObjectMapper();
            lVersicherung = mapper.readValue(data, Versicherung.class);
        } catch(Exception e) {
            LOGGER.error("PrintRestController.json2Versicherung() error", e);
        }
        return lVersicherung;
    }
}

PrintService i에서 pdf 바이너리와 응답을 작성합니다.

@Override
public Response getPDF(Versicherung pVersicherung) {
    byte[] result = ... //build the pdf from what ever


    ResponseBuilder response = Response.ok((Object) result);
    response.header("Content-Disposition", "inline; filename=mypdf.pdf");
    return response.build();
}

이 솔루션은 모든 브라우저(데이터 URL을 처리할 수 없는 IE9에서도)와 태블릿, 스마트폰에서 작동하며 팝업 차단에 문제가 없습니다.

Ajax와 같은 파일 다운로드 요청을 위한 jQuery 플러그인은 기본적으로 폼을 만들고 게시 데이터를 숨김 필드로 추가하여 페이지 본문에 추가하고 제출 및 삭제합니다.

제 경우 폼이 없어서 그대로 게시되는 데이터만 있었습니다.그것은 다음과 같은 해결책으로 만들어졌다.서버 측에서는 요청에서 "data" 파라미터를 읽고 URI를 디코딩하는 것만으로 데이터를 얻을 수 있습니다.

function postAndDownload(url, data) {

    encodedData = encodeURIComponent(data);

    $("<form>")
        .attr("action", url)
        .attr("method", "post")
        .append(
            $("input")
                .attr("type", "hidden")
                .attr("name", "data")
                .attr("value", encodedData)
        )
        .appendTo("body")
        .submit()
        .remove();
};

파일 다운로드 URL에 대한 Ajax 요청을 왜 원하는지 이해할 수 없습니다!그러나 클라이언트 자체가 다운로드용 콘텐츠를 생성하는 것에 가깝다면 데이터 uri를 사용하십시오.Chrome 및 Firefox 20+에서 완벽하게 작동합니다.Safari 및 IE 사용 불가! 플래시가 허용되면 다운로드 기능을 사용할 수 있습니다.

코드를 읽고 난 후, 당신은 많은 매개변수를 보내고 싶어 하는 것을 알 수 많은 매개변수를.쿼리 문자열이 너무 길지 않는 한(IE8- 제한은 2083), 적절한 URL을 가진 앵커를 사용하는 것은 어떨까요?

    $('a.export-csv').click( function (evt){
      linkEl.attr('href','/export?' + encodeURIComponent(formQueryString()));
      return true;
    });

위에서는 기본 이벤트(클릭)가 발생하기 전에 URL을 변경할 수 있습니다.

다운로드 폴더에 temp pdf 파일을 만들고 iframe이 있는 팝업을 사용하여 파일을 로드하는 것이 가장 좋을 것 같습니다.크롬은 즉시 로딩되지만, 다른 종류의 Acrobat 리더는 PDF를 표시하기 위해 설치되어 있어야 합니다.하지만 FlashPaper도 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/2186562/post-to-server-receive-pdf-deliver-to-user-w-jquery