JavaScript / jQuery для загрузки файла через POST с данными JSON

Question

У меня есть одностраничное веб-приложение на основе jquery. Он связывается с веб-сервисом RESTful через вызовы AJAX.

Я пытаюсь сделать следующее:

1. Отправка сообщения POST, содержащего данные JSON, в URL-адрес REST.
2. Если в запросе указан ответ JSON, возвращается JSON.
3. Если в запросе указан ответ PDF / XLS / etc, возвращается загружаемый двоичный файл.

У меня сейчас работают 1 и 2, и клиентское приложение jquery отображает возвращенные данные на веб-странице, создавая элементы DOM на основе данных JSON. У меня также есть # 3, работающий с точки зрения веб-сервиса, то есть он создаст и вернет двоичный файл, если ему будут заданы правильные параметры JSON. Но я не уверен, что лучший способ справиться с №3 в клиентском JavaScript-коде.

Можно ли получить загружаемый файл обратно с помощью вызова ajax, подобного этому? Как получить браузер для загрузки и сохранения файла?

$.ajax({
    type: "POST",
    url: "/services/test",
    contentType: "application/json",
    data: JSON.stringify({category: 42, sort: 3, type: "pdf"}),
    dataType: "json",
    success: function(json, status){
        if (status != "success") {
            log("Error loading data");
            return;
        }
        log("Data loaded!");
    },
    error: function(result, status, err) {
        log("Error loading data");
        return;
    }
});

Сервер отвечает следующими заголовками:

Content-Disposition:attachment; filename=export-1282022272283.pdf
Content-Length:5120
Content-Type:application/pdf
Server:Jetty(6.1.11)

Другая идея состоит в том, чтобы сгенерировать PDF-файл и сохранить его на сервере и вернуть JSON, содержащий URL-адрес файла. Затем выполните другой вызов в обработчике успеха ajax, чтобы сделать что-то вроде следующего:

success: function(json,status) {
    window.location.href = json.url;
}

Но это означает, что мне нужно будет сделать более одного вызова на сервер, и мой сервер должен будет создавать загружаемые файлы, хранить их где-то, а затем периодически очищать эту область хранения.

Должен быть более простой способ сделать это. Идеи?

---

РЕДАКТИРОВАТЬ: После просмотра документов для $ .ajax, я вижу, что dataType ответа может быть только один из xml, html, script, json, jsonp, text, поэтому я предполагаю, что нет способа напрямую загрузить файл с помощью запроса AJAX, если я не внедрить двоичный файл с использованием схемы Data URI, как предложено в ответе @VinayC (что я не хочу делать).

Итак, я думаю, мои варианты:

1. Не используйте ajax, вместо этого отправьте сообщение формы и вставьте мои данные JSON в значения формы. Вероятно, придется возиться со скрытыми iframes и тому подобное.

2. Не использовать ajax, а вместо этого преобразовать мои данные JSON в строку запроса для создания стандартного запроса GET и установить для window.location.href этот URL. Может потребоваться использовать event.preventDefault () в моем обработчике кликов, чтобы браузер не менял URL приложения.

3. Используйте мою другую идею выше, но дополненную предложениями из ответа @naikus. Отправьте AJAX-запрос с некоторым параметром, который позволяет веб-сервису узнать, что он вызывается через AJAX-вызов. Если веб-служба вызывается из вызова ajax, просто верните JSON с URL-адресом сгенерированного ресурса. Если ресурс вызывается напрямую, верните фактический двоичный файл.

Чем больше я об этом думаю, тем больше мне нравится последний вариант. Таким образом, я могу получить информацию о запросе (время генерации, размер файла, сообщения об ошибках и т. Д.), И я могу обработать эту информацию перед началом загрузки. Недостатком является дополнительное управление файлами на сервере.

Есть ли другие способы сделать это? Какие-нибудь плюсы / минусы этих методов мне следует знать?

Answer 1

Решение

letronje работает только для очень простых страниц. document.body.innerHTML += берет HTML-текст тела, добавляет HTML-код iframe и устанавливает 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>");
}); 

Что это на самом деле делает: выполнить запись в /create_binary_file.php с данными в переменной postData; если это сообщение успешно завершено, добавьте новый iframe в тело страницы. Предполагается, что ответ из /create_binary_file.php будет содержать значение 'url', которое является URL-адресом, с которого можно загрузить сгенерированный файл PDF / XLS / etc. Добавление iframe на страницу, которая ссылается на этот URL, приведет к тому, что браузер предложит пользователю загрузить файл, предполагая, что веб-сервер имеет соответствующую конфигурацию MIME-типа.

Answer 2

Я играл с другим вариантом, который использует капли.Мне удалось получить его для загрузки текстовых документов, и я загрузил PDF-файлы (однако они повреждены).

Используя API BLOB-объектов, вы сможете сделать следующее:

$.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();

});

Это IE 10+, Chrome 8+, FF 4+.См. https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

. Файл будет загружен только в Chrome, Firefox и Opera.При этом используется атрибут загрузки тега привязки, чтобы заставить браузер загрузить его.

Answer 3

Я знаю этот вид старого, но я думаю, что нашел более элегантное решение.У меня была точно такая же проблема.Проблема, с которой я столкнулся при использовании предложенных решений, заключалась в том, что все они требовали сохранения файла на сервере, но я не хотел сохранять файлы на сервере, поскольку это вызывало другие проблемы (безопасность: доступ к файлу мог бытьнеаутентифицированные пользователи, очистка: как и когда вы избавляетесь от файлов).Как и вы, мои данные были сложными, вложенными объектами 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
    }

Answer 4

Существует более простой способ, создать форму и опубликовать ее, это рискует сбросить страницу, если тип возвращаемой 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, текст и тому подобное, убедитесь, что mimetype - это что-то вроде application / 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;

Answer 5

Короче говоря, нет более простого способа. Вам нужно сделать еще один запрос к серверу, чтобы показать файл PDF. Хотя альтернативы немного, но они не идеальны и не будут работать во всех браузерах:

1. Посмотрите на схему URI данных . Если двоичные данные невелики, вы можете использовать JavaScript для открытия окна, передающего данные в URI.
2. Единственным решением для Windows / IE было бы иметь .NET control или FileSystemObject для сохранения данных в локальной файловой системе и открытия их оттуда.

Answer 6

Прошло много времени с тех пор, как этот вопрос был задан, но у меня была такая же проблема, и я хочу поделиться своим решением.Он использует элементы из других ответов, но я не смог найти его полностью.Он не использует форму или iframe, но требует пару запросов post / get.Вместо сохранения файла между запросами, он сохраняет данные поста.Это кажется простым и эффективным.

клиент

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");
}

Answer 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);
};

Answer 8

Не совсем ответ на оригинальный пост, но быстрое и грязное решение для публикации 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');

Answer 9

Я думаю, что лучший подход - это использовать комбинацию. Ваш второй подход выглядит элегантным решением, когда задействованы браузеры.

Так что в зависимости от того, как сделан звонок.(будь то браузер или вызов веб-службы) вы можете использовать комбинацию этих двух способов, отправив URL-адрес в браузер и отправив необработанные данные любому другому клиенту веб-службы.

Answer 10

С HTML5 вы можете просто создать якорь и щелкнуть по нему. Нет необходимости добавлять его в документ как ребенок.

const a = document.createElement('a');
a.download = '';
a.href = urlForPdfFile;
a.click();

Все сделано.

Если вы хотите иметь специальное имя для загрузки, просто передайте его в атрибуте download:

const a = document.createElement('a');
a.download = 'my-special-name.pdf';
a.href = urlForPdfFile;
a.click();