Télécharger le fichier PDF, Angulaire 6 et Web API

Je veux télécharger le fichier PDF à l'aide Angulaire 6 et Web API.
Voici le code de la mise en œuvre,

moncomposant.ts

download(myObj: any) {
    this.testService.downloadDoc(myObj.id).subscribe(result => {

        var url = window.URL.createObjectURL(result);
        window.open(url);
        console.log("download result ", result);
    });
}

myService.ts

downloadDoc(Id: string): Observable<any> {
    let url = this.apiUrl + "api/myApi/download/" + Id;
    return this.http.get(url, { responseType: "blob" });
}

API Web Service

[HttpGet("download/{DocId}")]
    public async Task<HttpResponseMessage> GetDocument(string docId)
    {
        var docDetails = await _hoaDocs.GetDocumentDetails(docId).ConfigureAwait(false);
        var dataBytes = docDetails.Stream;
        var dataStream = new MemoryStream(dataBytes);

        var response = new HttpResponseMessage
        {
            StatusCode = HttpStatusCode.OK,
            Content = new StreamContent(dataStream)
        };

        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = docDetails.File_Name
        };
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

        return response;
    }

Lorsque j'exécute le code ci-dessus, il n'est pas le téléchargement du fichier PDF, voici le résultat de l'objet qui est enregistré dans la console

download result  
Blob(379) {size: 379, type: "application/json"}
size:379
type:"application/json"
__proto__:Blob

InformationsquelleAutor Madhu | 2018-08-01

5

Je suis en supposant que vous utilisez .Net De Base.

Vous le type de retour est HttpResponseMessage. Pour .Net de Base-là, il devrait être IActionResult.

Donc, dans votre cas, vous serez de retour
```
return File(<filepath-or-stream>, <content-type>)
```
Ou

Vous avez à faire un petit changement dans votre Démarrage.cs fichier:
```
services.AddMvc().AddWebApiConventions();
```
Puis, je ne suis pas sûr à 100% ici, mais vous devez modifier le routage de trop:
```
routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}");
```
- Oui, je suis en utilisant .NET Core, et votre suggestion a fait le tour.
InformationsquelleAutor r2018

import { Injectable } from "@angular/core";
declare var $;

@Injectable()
export class DownloadFileService {

   save(file, fileName) {
       if (window.navigator.msSaveOrOpenBlob) {
        //IE specific download.
        navigator.msSaveBlob(file, fileName);
    } else {
        const downloadLink = document.createElement("a");
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
        downloadLink.setAttribute("href", window.URL.createObjectURL(file));
        downloadLink.setAttribute("download", fileName);
        downloadLink.click();
        document.body.removeChild(downloadLink);
     }
   }
}

Merci pour votre réponse, quand j'ai essayé la méthode suggérée le document obtenu téléchargé en tant que fichier json. Quand j'ai essayé de changer l'extension en .pdf, et l'a ouvert, a obtenu un message d'erreur indiquant que "le Lecteur ne peut pas ouvrir "test.pdf', car il n'est pas pris en charge type de fichier".
U peut utiliser le service suivant qui va télécharger les données au format pdf lui-même var yourPDFDataBlob = new Blob([réponse-a-partir-serveur], { type: "application/pdf" }); downloadFileService.enregistrer( yourPDFDataBlob , pdf-file-name + ".pdf");

InformationsquelleAutor anees

1

Dans certains navigateur, Nous avons besoin de créer dynamiquement balise d'Ancrage et de le rendre cliquable pour télécharger des fichiers. Voici le code .
```
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;
  link.click();
```
Espère que, cela aide. Merci.

InformationsquelleAutor Suresh Kumar Ariya

dataService.ts

  downloadNoteReceipt(notes_purchased_id: number):Observable<Blob>{    
        return this.httpClient.get(this.baseUrl + `receipt/notespurchasedreceipt/` + notes_purchased_id, { responseType: "blob" } );
      }

composant.ts

  download(booking_id: number) {
    this.orderDetailsService.downloadNoteReceipt(booking_id).subscribe(res => {
      console.log(res);
      var newBlob = new Blob([res], { type: "application/pdf" });

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
    }
     //For other browsers: 
            //Create a link pointing to the ObjectURL containing the blob.
            const data = window.URL.createObjectURL(newBlob);

            var link = document.createElement('a');
            link.href = data;
            link.download = "receipt.pdf";
            //this is necessary as link.click() does not work on the latest firefox
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

            setTimeout(function () {
                //For Firefox it is necessary to delay revoking the ObjectURL
                window.URL.revokeObjectURL(data);
            }, 100);

    }, error => {
      console.log(error);
    })
  }

component.html

 <i class="fa fa-download" style="font-size:20px;color:purple" aria-hidden="true" (click)="download(row.booking_id)"></i>

InformationsquelleAutor Sachin from Pune

Vous devez vous connecter pour publier un commentaire.