JSON 데이터를 POST를 통해 다운로드 파일에 자바 스크립트 / jQuery를

해결법

1.letronje의 솔루션은 매우 간단 페이지에 적용됩니다. document.body.innerHTML는 + = 몸의 HTML 텍스트를 취하는 iframe이 HTML을 추가하고, 그 문자열로 페이지의 innerHTML을 설정합니다. 이것은 다른 것들 사이에 페이지가있는 모든 이벤트 바인딩을 쓸어 것입니다. 요소를 만들고 사용하는 대신에 appendChild.

letronje의 솔루션은 매우 간단 페이지에 적용됩니다. document.body.innerHTML는 + = 몸의 HTML 텍스트를 취하는 iframe이 HTML을 추가하고, 그 문자열로 페이지의 innerHTML을 설정합니다. 이것은 다른 것들 사이에 페이지가있는 모든 이벤트 바인딩을 쓸어 것입니다. 요소를 만들고 사용하는 대신에 appendChild.
```
$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
}); 
```
또는 jQuery를 사용하여
```
$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src='" + retData.url+ "' style='display: none;' ></iframe>");
}); 
```
이것이 실제로 수행합니다 변수의 postData의 데이터와 /create_binary_file.php하는 게시물을 수행; 해당 게시물이 성공적으로 완료되면, 페이지의 본문에 새 iframe을 추가합니다. 가정은 /create_binary_file.php의 응답이 생성 된 PDF / XLS / 등 파일을 다운로드 할 수있는 URL은 값 'URL'을 포함하는 것입니다. 참조 URL은 웹 서버가 적절한 MIME 타입의 구성을 가지고 가정, 파일을 다운로드하는 사용자를 촉진 브라우저 초래할 것이라는 점을 그 페이지에 iframe을 추가.
2.내가 사용의 모양이 다른 옵션을 사용 해본. 나는 그것이 텍스트 문서를 다운로드 얻기 위해 관리했습니다, 나는 PDF의 다운로드 한 (그러나 그들은 손상).

내가 사용의 모양이 다른 옵션을 사용 해본. 나는 그것이 텍스트 문서를 다운로드 얻기 위해 관리했습니다, 나는 PDF의 다운로드 한 (그러나 그들은 손상).

당신이 다음을 수행 할 수있을 것입니다 블롭 API를 사용하여 :
```
$.post(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});
```
이 4 + IE 10 +, 크롬 8 +, FF입니다. https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL 참조

그것은 단지 크롬, 파이어 폭스와 오페라에서 파일을 다운로드합니다. 이 다운로드 브라우저를 강제로 앵커 태그에 다운로드 속성을 사용합니다.
3.나는 옛날의이 종류를 알고,하지만 난 더 우아한 해결책을 온 것 같아요. 나는 똑같은 문제를 가지고 있었다. 내가 제안 된 솔루션을 가졌다 문제는 모두 서버에 저장되는 파일을 필요한 것을했다, 그러나 다른 문제 (보안을 도입 때문에, 서버에 파일을 저장하지 않은 : 파일이 다음에 액세스 할 수 인증되지 않은 사용자, 정리 : 어떻게) 당신이 파일을 없애 수행 할 때. 그리고 당신처럼, 내 데이터는 형태로 넣어 어려울 것이다 복잡하고 중첩 된 JSON 객체이었다.

나는 옛날의이 종류를 알고,하지만 난 더 우아한 해결책을 온 것 같아요. 나는 똑같은 문제를 가지고 있었다. 내가 제안 된 솔루션을 가졌다 문제는 모두 서버에 저장되는 파일을 필요한 것을했다, 그러나 다른 문제 (보안을 도입 때문에, 서버에 파일을 저장하지 않은 : 파일이 다음에 액세스 할 수 인증되지 않은 사용자, 정리 : 어떻게) 당신이 파일을 없애 수행 할 때. 그리고 당신처럼, 내 데이터는 형태로 넣어 어려울 것이다 복잡하고 중첩 된 JSON 객체이었다.

내가 한 일은 두 서버 기능을 만들 수 있었다. 먼저 데이터를 검증. 오류가 있었다면, 그것은 반환 될 것이다. 이 오류가 아니었다면, 나는 base64로 문자열로 인코딩 된 직렬화 매개 변수 / 모두를 반환했습니다. 그런 다음 클라이언트에, 나는 두 번째 서버 기능을 하나의 숨겨진 입력과 글이있는 형태를 갖는다. 나는 base64로 문자열에 숨겨진 입력을 설정하고 형식을 제출합니다. 두 번째 서버 기능은 매개 변수를 직렬화 / 복호하여 파일을 생성한다. 양식은 페이지에서 새 창 또는 iframe을 제출 수 있고 파일이 열립니다.

이 작은 관련된 더 많은 작업을 비트, 그리고 아마도 조금 더 많은 처리 비트,하지만 전반적으로, 나는 훨씬 더이 솔루션을 느꼈다.

코드는 C #으로는 / MVC
```
    public JsonResult Validate(int reportId, string format, ReportParamModel[] parameters)
    {
        // TODO: do validation

        if (valid)
        {
            GenerateParams generateParams = new GenerateParams(reportId, format, parameters);

            string data = new EntityBase64Converter<GenerateParams>().ToBase64(generateParams);

            return Json(new { State = "Success", Data = data });
        }

        return Json(new { State = "Error", Data = "Error message" });
    }

    public ActionResult Generate(string data)
    {
        GenerateParams generateParams = new EntityBase64Converter<GenerateParams>().ToEntity(data);

        // TODO: Generate file

        return File(bytes, mimeType);
    }
```
클라이언트
```
    function generate(reportId, format, parameters)
    {
        var data = {
            reportId: reportId,
            format: format,
            params: params
        };

        $.ajax(
        {
            url: "/Validate",
            type: 'POST',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: generateComplete
        });
    }

    function generateComplete(result)
    {
        if (result.State == "Success")
        {
            // this could/should already be set in the HTML
            formGenerate.action = "/Generate";
            formGenerate.target = iframeFile;

            hidData = result.Data;
            formGenerate.submit();
        }
        else
            // TODO: display error messages
    }
```

4.간단한 방법이 있습니다, 양식을 작성하여 게시이 반환 MIME 타입 뭔가 브라우저를 열 것이라고하지만, CSV과 같은 그것의 완벽한 경우 페이지를 재설정의 위험을 실행

간단한 방법이 있습니다, 양식을 작성하여 게시이 반환 MIME 타입 뭔가 브라우저를 열 것이라고하지만, CSV과 같은 그것의 완벽한 경우 페이지를 재설정의 위험을 실행

예 밑줄 및 jQuery를 필요

var postData = {
    filename:filename,
    filecontent:filecontent
};
var fakeFormHtmlFragment = "<form style='display: none;' method='POST' action='"+SAVEAS_PHP_MODE_URL+"'>";
_.each(postData, function(postValue, postKey){
    var escapedKey = postKey.replace("\\", "\\\\").replace("'", "\'");
    var escapedValue = postValue.replace("\\", "\\\\").replace("'", "\'");
    fakeFormHtmlFragment += "<input type='hidden' name='"+escapedKey+"' value='"+escapedValue+"'>";
});
fakeFormHtmlFragment += "</form>";
$fakeFormDom = $(fakeFormHtmlFragment);
$("body").append($fakeFormDom);
$fakeFormDom.submit();

HTML, 텍스트와 같은 같은 것들을 들어, 확인 MIME 형식이 응용 프로그램 / octet-stream을 같이 어떤 일이되어 있는지 확인

PHP 코드

<?php
/**
 * get HTTP POST variable which is a string ?foo=bar
 * @param string $param
 * @param bool $required
 * @return string
 */
function getHTTPPostString ($param, $required = false) {
    if(!isset($_POST[$param])) {
        if($required) {
            echo "required POST param '$param' missing";
            exit 1;
        } else {
            return "";
        }
    }
    return trim($_POST[$param]);
}

$filename = getHTTPPostString("filename", true);
$filecontent = getHTTPPostString("filecontent", true);

header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"$filename\"");
echo $filecontent;

5.즉, 더 간단한 방법이 없습니다. 당신은 PDF 파일을 표시하는 다른 서버 요청을해야합니다. 알은하지만, 몇 가지 대안이 있지만 그들이 완벽하지 및 모든 브라우저에서하지 작업 :

즉, 더 간단한 방법이 없습니다. 당신은 PDF 파일을 표시하는 다른 서버 요청을해야합니다. 알은하지만, 몇 가지 대안이 있지만 그들이 완벽하지 및 모든 브라우저에서하지 작업 :

6.이 질문에 질문하지만이 같은 도전을했고 내 솔루션을 공유 할 이후 그것은 오랜만입니다. 그것은 다른 답변에서 요소를 사용하지만 전체에서 찾을 수 없습니다. 그것은 폼 또는 iframe을 사용하지 않습니다하지만 포스트 / 가져 오기 요청 쌍을 필요로 않습니다. 대신 요청 사이의 파일을 저장, 그것은 포스트 데이터를 저장합니다. 간단하고 효과적인 둘 것으로 보인다.

이 질문에 질문하지만이 같은 도전을했고 내 솔루션을 공유 할 이후 그것은 오랜만입니다. 그것은 다른 답변에서 요소를 사용하지만 전체에서 찾을 수 없습니다. 그것은 폼 또는 iframe을 사용하지 않습니다하지만 포스트 / 가져 오기 요청 쌍을 필요로 않습니다. 대신 요청 사이의 파일을 저장, 그것은 포스트 데이터를 저장합니다. 간단하고 효과적인 둘 것으로 보인다.

var apples = new Array(); 
// construct data - replace with your own
$.ajax({
   type: "POST",
   url: '/Home/Download',
   data: JSON.stringify(apples),
   contentType: "application/json",
   dataType: "text",

   success: function (data) {
      var url = '/Home/Download?id=' + data;
      window.location = url;
   });
});

[HttpPost]
// called first
public ActionResult Download(Apple[] apples)
{
   string json = new JavaScriptSerializer().Serialize(apples);
   string id = Guid.NewGuid().ToString();
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   System.IO.File.WriteAllText(path, json);

   return Content(id);
}

// called next
public ActionResult Download(string id)
{
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   string json = System.IO.File.ReadAllText(path);
   System.IO.File.Delete(path);
   Apple[] apples = new JavaScriptSerializer().Deserialize<Apple[]>(json);

   // work with apples to build your file in memory
   byte[] file = createPdf(apples); 

   Response.AddHeader("Content-Disposition", "attachment; filename=juicy.pdf");
   return File(file, "application/pdf");
}

7.

$scope.downloadSearchAsCSV = function(httpOptions) {
  var httpOptions = _.extend({
    method: 'POST',
    url:    '',
    data:   null
  }, httpOptions);
  $http(httpOptions).then(function(response) {
    if( response.status >= 400 ) {
      alert(response.status + " - Server Error \nUnable to download CSV from POST\n" + JSON.stringify(httpOptions.data));
    } else {
      $scope.downloadResponseAsCSVFile(response)
    }
  })
};
/**
 * @source: https://github.com/asafdav/ng-csv/blob/master/src/ng-csv/directives/ng-csv.js
 * @param response
 */
$scope.downloadResponseAsCSVFile = function(response) {
  var charset = "utf-8";
  var filename = "search_results.csv";
  var blob = new Blob([response.data], {
    type: "text/csv;charset="+ charset + ";"
  });

  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename); // @untested
  } else {
    var downloadContainer = angular.element('<div data-tap-disabled="true"><a></a></div>');
    var downloadLink      = angular.element(downloadContainer.children()[0]);
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', "search_results.csv");
    downloadLink.attr('target', '_blank');

    $document.find('body').append(downloadContainer);

    $timeout(function() {
      downloadLink[0].click();
      downloadLink.remove();
    }, null);
  }

  //// Gets blocked by Chrome popup-blocker
  //var csv_window = window.open("","","");
  //csv_window.document.write('<meta name="content-type" content="text/csv">');
  //csv_window.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
  //csv_window.document.write(response.data);
};

8.아니 완전히 원래의 게시물에 대한 답변,하지만 서버에 JSON 객체를 게시하고 동적으로 다운로드를 생성하기위한 신속하고 더러운 솔루션입니다.

아니 완전히 원래의 게시물에 대한 답변,하지만 서버에 JSON 객체를 게시하고 동적으로 다운로드를 생성하기위한 신속하고 더러운 솔루션입니다.

클라이언트 측 jQuery를 :

var download = function(resource, payload) {
     $("#downloadFormPoster").remove();
     $("<div id='downloadFormPoster' style='display: none;'><iframe name='downloadFormPosterIframe'></iframe></div>").appendTo('body');
     $("<form action='" + resource + "' target='downloadFormPosterIframe' method='post'>" +
      "<input type='hidden' name='jsonstring' value='" + JSON.stringify(payload) + "'/>" +
      "</form>")
      .appendTo("#downloadFormPoster")
      .submit();
}

.. 그리고 그 서버 측에서 JSON 스트링을 디코딩하고 다운로드 (PHP 예) 헤더를 설정 :

$request = json_decode($_POST['jsonstring']), true);
header('Content-Type: application/csv');
header('Content-Disposition: attachment; filename=export.csv');
header('Pragma: no-cache');

9.내가 가장 좋은 방법은 조합을 사용하는 것입니다 생각, 두 번째 접근 방식은 브라우저가 참여하고 우아한 해결책이 될 것으로 보인다.

내가 가장 좋은 방법은 조합을 사용하는 것입니다 생각, 두 번째 접근 방식은 브라우저가 참여하고 우아한 해결책이 될 것으로 보인다.

호출이 이루어 방법에 따라 그래서. (자사의 브라우저 또는 웹 서비스 호출 여부)는 브라우저에 URL을 전송하고 다른 웹 서비스 클라이언트에 원시 데이터를 전송로, 둘의 조합을 사용할 수 있습니다.
10.지금은 아약스 호출 jQuery를 사용하여 파일을 다운로드하는 방법을 알아 내려고 이틀 동안 깨어 있었다. 나는이 시도 될 때까지 내 상황에 도움이되지 수있어 모든 지원을 제공합니다.

지금은 아약스 호출 jQuery를 사용하여 파일을 다운로드하는 방법을 알아 내려고 이틀 동안 깨어 있었다. 나는이 시도 될 때까지 내 상황에 도움이되지 수있어 모든 지원을 제공합니다.

고객 입장에서

함수 exportStaffCSV (t) { VAR postData를 = {checkOne : t}; {(아약스 $ 입력 : "POST", URL : "/ 관리 / 직원 / exportStaffAsCSV" 데이터 : postData를, 성공 : 기능 (데이터) { SuccessMessage ( "파일 다운로드는 몇 초에 시작됩니다 .."); VAR URL은 = '? / 관리 / 직원 / DownloadCSV 데이터 ='+ 데이터; 에서는 window.location = URL; }, 전통 : 사실, 오류 : 함수 (XHR 상태, P3, P4) { var에 ERR = "오류"+ ""+ 상태 + ""+ P3 + ""+ P4; 경우 (xhr.responseText && xhr.responseText [0] == "{") ERR = JSON.parse (xhr.responseText) .Message; ErrorMessage가 (ERR); } }); }

서버 측
```
 [HttpPost]
    public string exportStaffAsCSV(IEnumerable<string> checkOne)
    {
        StringWriter sw = new StringWriter();
        try
        {
            var data = _db.staffInfoes.Where(t => checkOne.Contains(t.staffID)).ToList();
            sw.WriteLine("\"First Name\",\"Last Name\",\"Other Name\",\"Phone Number\",\"Email Address\",\"Contact Address\",\"Date of Joining\"");
            foreach (var item in data)
            {
                sw.WriteLine(string.Format("\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\"",
                    item.firstName,
                    item.lastName,
                    item.otherName,
                    item.phone,
                    item.email,
                    item.contact_Address,
                    item.doj
                    ));
            }
        }
        catch (Exception e)
        {

        }
        return sw.ToString();

    }

    //On ajax success request, it will be redirected to this method as a Get verb request with the returned date(string)
    public FileContentResult DownloadCSV(string data)
    {
        return File(new System.Text.UTF8Encoding().GetBytes(data), System.Net.Mime.MediaTypeNames.Application.Octet, filename);
        //this method will now return the file for download or open.
    }
```
행운을 빕니다.

11.그것은 어딘가에 오래 전에 발견하고 완벽하게 작동합니다!

그것은 어딘가에 오래 전에 발견하고 완벽하게 작동합니다!

let payload = {
  key: "val",
  key2: "val2"
};

let url = "path/to/api.php";
let form = $('<form>', {'method': 'POST', 'action': url}).hide();
$.each(payload, (k, v) => form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v})) );
$('body').append(form);
form.submit();
form.remove();

12.대신 서버에 파일을 저장하고 검색하는 또 다른 방법은, 두 번째 작업까지 짧은 만기와 .NET 4.0 이상 ObjectCache을 사용하는 것입니다 (이 시간에 그것은 결정적으로 덤프 할 수 있습니다.) 내가 전화를 할 JQuery와 아약스를 사용하려는 이유는, 그것이 비동기 것입니다. 내 동적 PDF 파일을 구축하는 것은 꽤 많은 시간을 소요, 나는 그 시간 동안 바쁜 스피너 대화 상자를 표시합니다 (그것은 또한 다른 작업을 수행 할 수 있습니다). 에 반환 된 데이터를 사용하는 방법 "성공"의 Blob가 안정적으로 작동하지 않습니다 만들 수 있습니다. 그것은 PDF 파일의 내용에 따라 달라집니다. 이 아약스가 처리 할 수있는 모든 것을 어느 완전히 텍스트가 아닌 경우 그것은 쉽게, 응답 데이터가 손상되었습니다.

대신 서버에 파일을 저장하고 검색하는 또 다른 방법은, 두 번째 작업까지 짧은 만기와 .NET 4.0 이상 ObjectCache을 사용하는 것입니다 (이 시간에 그것은 결정적으로 덤프 할 수 있습니다.) 내가 전화를 할 JQuery와 아약스를 사용하려는 이유는, 그것이 비동기 것입니다. 내 동적 PDF 파일을 구축하는 것은 꽤 많은 시간을 소요, 나는 그 시간 동안 바쁜 스피너 대화 상자를 표시합니다 (그것은 또한 다른 작업을 수행 할 수 있습니다). 에 반환 된 데이터를 사용하는 방법 "성공"의 Blob가 안정적으로 작동하지 않습니다 만들 수 있습니다. 그것은 PDF 파일의 내용에 따라 달라집니다. 이 아약스가 처리 할 수있는 모든 것을 어느 완전히 텍스트가 아닌 경우 그것은 쉽게, 응답 데이터가 손상되었습니다.
13.내용 - 처리 첨부 나를 위해 작동하는 것 같다 :

내용 - 처리 첨부 나를 위해 작동하는 것 같다 :
```
self.set_header("Content-Type", "application/json")
self.set_header("Content-Disposition", 'attachment; filename=learned_data.json')
```
응용 프로그램 / octet-stream을

나는에 헤더를 설정하고 서버 측에서 나를 위해 JSON과 나 비슷한 해프닝이 있었다 self.set_header ( "Content-Type을", "응용 프로그램 / JSON") 그러나 나는 그것을하기 위해 변경하는 경우 :
```
self.set_header("Content-Type", "application/octet-stream")
```
그것은 자동으로 다운로드했습니다.

또한 순서대로 파일이 계속 유지하는 것을 알고 .json 접미사를 사용하면 파일 이름 헤더에 필요합니다 :
```
self.set_header("Content-Disposition", 'filename=learned_data.json')
```
14.HTML5와 함께, 당신은 단지 앵커를 만들 수 있으며 클릭합니다. 자식으로 문서에 추가 할 필요가 없습니다.

HTML5와 함께, 당신은 단지 앵커를 만들 수 있으며 클릭합니다. 자식으로 문서에 추가 할 필요가 없습니다.
```
const a = document.createElement('a');
a.download = '';
a.href = urlForPdfFile;
a.click();
```
모든 다.

당신이 다운로드 할 특별한 이름을 가지고 싶다면, 바로 다운로드 속성에 전달할 :
```
const a = document.createElement('a');
a.download = 'my-special-name.pdf';
a.href = urlForPdfFile;
a.click();
```

from https://stackoverflow.com/questions/3499597/javascript-jquery-to-download-file-via-post-with-json-data by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 크로스 브라우저 창 크기 조정 이벤트 - 자바 스크립트 / jQuery를 (0)	2020.10.08
[JQUERY] 방향 지시의 사용자 조언 세로 디스플레이 경고 메시지 인 경우, 뷰포트 방향을 감지 (0)	2020.10.08
[JQUERY] ES6 / ECMA6 템플릿 리터럴 - 작동하지 (0)	2020.10.08
[JQUERY] jQuery를 확인 : 변경 기본 오류 메시지 (0)	2020.10.08
[JQUERY] 구글의 API에서 "최신"jQuery 라이브러리에 대한 링크가 있습니까? [복제] (0)	2020.10.08

복붙노트

[JQUERY] JSON 데이터를 POST를 통해 다운로드 파일에 자바 스크립트 / jQuery를

JSON 데이터를 POST를 통해 다운로드 파일에 자바 스크립트 / jQuery를

해결법

2.내가 사용의 모양이 다른 옵션을 사용 해본. 나는 그것이 텍스트 문서를 다운로드 얻기 위해 관리했습니다, 나는 PDF의 다운로드 한 (그러나 그들은 손상).

4.간단한 방법이 있습니다, 양식을 작성하여 게시이 반환 MIME 타입 뭔가 브라우저를 열 것이라고하지만, CSV과 같은 그것의 완벽한 경우 페이지를 재설정의 위험을 실행

5.즉, 더 간단한 방법이 없습니다. 당신은 PDF 파일을 표시하는 다른 서버 요청을해야합니다. 알은하지만, 몇 가지 대안이 있지만 그들이 완벽하지 및 모든 브라우저에서하지 작업 :

7.

8.아니 완전히 원래의 게시물에 대한 답변,하지만 서버에 JSON 객체를 게시하고 동적으로 다운로드를 생성하기위한 신속하고 더러운 솔루션입니다.

9.내가 가장 좋은 방법은 조합을 사용하는 것입니다 생각, 두 번째 접근 방식은 브라우저가 참여하고 우아한 해결책이 될 것으로 보인다.

10.지금은 아약스 호출 jQuery를 사용하여 파일을 다운로드하는 방법을 알아 내려고 이틀 동안 깨어 있었다. 나는이 시도 될 때까지 내 상황에 도움이되지 수있어 모든 지원을 제공합니다.

11.그것은 어딘가에 오래 전에 발견하고 완벽하게 작동합니다!

13.내용 - 처리 첨부 나를 위해 작동하는 것 같다 :

14.HTML5와 함께, 당신은 단지 앵커를 만들 수 있으며 클릭합니다. 자식으로 문서에 추가 할 필요가 없습니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바