Быстрый файл скачать

Question

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

Мой HTML (компонент реакции) имеет код ниже, где 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 скачать приглашение. Что я здесь делаю неправильно?

объект Response на успех от lokks Ajax вызова, как показано ниже

Answer 1

Ваш вопрос в том, что функция 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=> { 

    }); 

Answer 2

В нашем приложении (угловой) мы должны были создать объект 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); 

Answer 3

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

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

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

Или использовать этот простой JS скрипт, если хотите, чтобы управлять им из вашей логики сценария:

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

Answer 4

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

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

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

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

window.location = item.downloadUrl; 

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

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

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

Answer 5

Создание контента предрасположенности и добавить его в заголовок ответа

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