Скачайте файл скачать

У меня есть ссылка на моей странице, клик которой я пытаюсь создать PDF-документ, а затем показать приглашение "Открыть-Сохранить" в браузере.

Мой HTML (компонент responsejs) имеет код ниже, где onclick вызывает функцию _getMyDocument, которая затем вызывает метод Webapi.

 <div className="row">
     <a href="#" onClick={this._getMyDocument.bind(this)}>Test Link</a>
 </div>  

_getMyDocument(e) {
            GetMyDocument(this.props.mydata).then(()=> {
   }).catch(error=> {

  });

Мой контроллер имеет код ниже

[HttpPost]
[Route("Generate/Report")]
public IHttpActionResult GetMyReport(MyData myData)
 {  
    byte[] myDoc = MyBusinessObject.GenerateMyReport(myData);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(myDoc)
        };
        result.Content.Headers.ContentDisposition =
            new ContentDispositionHeaderValue("attachment")
            {
                FileName = "MyDocument.pdf"
            };
        result.Content.Headers.ContentType =
            new MediaTypeHeaderValue("application/octet-stream");

        var response = ResponseMessage(result);

        return response;
  }

В настоящий момент весь код выполняется, но я не получаю подсказку загрузки файла PDF. Что я здесь делаю неправильно?

Объект ответа при успешном выполнении из ajax-вызовов lokks, как показано ниже

Ответ 1

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

Предположим, что ваш ресурс url-объекта выглядит как показано ниже в js. (т.е. вы уже знаете URL ресурса, если вы еще этого не знаете, тогда вам понадобится отдельный вызов серверу, чтобы узнать URL-адрес загрузки)

response.downloadUrl = app/media/fileId/document.pdf

Все, что вам нужно сделать,

window.location = item.downloadUrl;

Это заставит браузер запрашивать ресурс с сервера, ответ с сервера должен включать Content-Disposition:attachment; , Это приведет к тому, что браузер отобразит диалоговое окно загрузки.

PS Я недавно работал над подобной функциональностью. Если у вас есть вопросы, пожалуйста, спросите.

Если вы хотите заставить браузер отображать приглашение загрузки для некоторых файлов (или ресурсов), вы должны включить Content-Disposition:attachment; в заголовке ответа (который вы уже сделали).

Ответ 2

Простой способ сделать это - на вашем сервере использовать метод GET и получать ваши данные по параметрам запроса.

Затем в вашем клиентском приложении вам просто нужно создать классическую ссылку:

<a href="http://your-server.com/your-resource?param1=123&param2=456">Test Link</a>

Или используйте этот простой js script, если вы хотите управлять им из логики script:

window.open("http://your-server.com/your-resource?param1=123&param2=456");

Ответ 3

Ваша проблема в том, что функция GetMyDocument получит файл PDF в качестве ответа сервера, и в настоящее время вы ничего не делаете с этим ответом. Вам нужно обработать ответ в обратном вызове. Сохранение файлов из javascript не совсем просто, поэтому я бы рекомендовал использовать внешнюю библиотеку, такую как filesaver.js, чтобы помочь вам.

В итоге это будет выглядеть как-то...

_getMyDocument(e) {
    GetMyDocument(this.props.mydata)
    .then((response)=> {
        const returnedFile = new Blob([response], { type: 'application/pdf'});
        saveAs(returnedFile);
    }).catch(error=> {

    });

Ответ 4

В нашем приложении (angular) нам нужно было создать URL-адрес объекта с таким кодом, как:

WebAPI:

result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new ByteArrayContent(data);
result.Content.Headers.Add("Content-Type", "application/pdf");
result.Content.Headers.ContentDisposition =
                        new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                        {
                            FileName = "FileNameHere"
                        };

return result;

JavaScript:

// HttpCall in here
// On SuccessResponse
    var file = new Blob([data], {
                    type: 'application/pdf'
                    });
    var fileURL = URL.createObjectURL(file);
// create an anchor and click on it.
    var ancorTag = document.createElement('a');
    ancorTag.href = fileURL;ancorTag.target = '_blank';
    ancorTag.download = 'CouponOrder.pdf';
    document.body.appendChild(ancorTag);
    ancorTag.click();
    document.body.removeChild(ancorTag);

Ответ 5

Создать Content Disposition и добавить его в заголовок ответа

var cd = new System.Net.Mime.ContentDisposition
{
    // for example foo.bak
    FileName = System.IO.Path.GetFileName(fileName),
    // always prompt the user for downloading, set to true if you want 
    // the browser to try to show the file inline
    Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());