Download MVC 5 file to Angular 2

Question

I have experience with C # backend and ASP.Net MVC. Now I am making my first attempt at Angular 2. It takes time, but I like most of it. Now I'm stuck in a simple file upload.

I have read all the examples that I found here in Stackoverflow, but I'm still not working on my example.

On the server side, I have this C # code:

    public ActionResult DownloadPicture(long id)
    {
        var bytes = System.IO.File.ReadAllBytes("images\dummy.jpg");
        return GetAttachement(bytes, "DummyFile.jpg");
    }

    private ActionResult GetAttachement(byte[] bytes, string fileName)
    {
        var contentType = MimeMapping.GetMimeMapping(fileName);
        var contentDisposition = new System.Net.Mime.ContentDisposition
        {
            FileName = fileName,
            Inline = true
        };
        Response.AppendHeader("Content-Disposition", contentDisposition.ToString());
        return File(bytes, contentType);
    }

On the client side, I have this Typescript code:

public pictureDownload(id: number): void {
    let options = new RequestOptions({ search: new URLSearchParams("id=" + id) });
    this.http.get(this.urlPictureDownload, options).subscribe((data: any) => {
                // var blob = new Blob([data._body], { type: "image/jpeg" });
                // var url = window.URL.createObjectURL(blob);
                // window.open(url);
       });
 }

The request arrives at the server. The array is loading. I think my problem lies with the client. Can anyone help me out?

Answer 1

. EsDF peinearydevelopment . responseType ArrayBuffer , .

Alt 1: , . - , . , , , .

Alt 2: openPictureInNewWindow - . , URL-, : blob: http://localhost/037713d1-a8b9-4fe3-8c43-ee5998ffdc5d.

Alt 3: downloadFile . , . " Angular 2", DOM, , , . !

public pictureDownload(id: number) {
    let options = new RequestOptions({ search: new URLSearchParams("id=" + id), responseType: ResponseContentType.ArrayBuffer });
    this.http.get(this.urlPictureDownload, options).subscribe((data: any) => {
        //this.openPictureInNewWindow(data._body, "image/jpeg");
        this.downloadFile(data._body, "Screenshot_" + id + ".jpg", "image/jpeg");
    });
}

private openPictureInNewWindow(data: ArrayBuffer, contentType: string) {
    var blob = new Blob([data], { type: contentType });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
}

private downloadFile(data: ArrayBuffer, fileName: string, contentType: string) {
    var blob = new Blob([data], { type: contentType });
    var url = window.URL.createObjectURL(blob);

    var link = document.createElement("a");
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Answer 2

, Angular2. , , "" (, , ). , , .

• , - : var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data)); pom.setAttribute('download', 'PICTURENAME.jpeg'); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom);

• , , , , ( GUID), , .

Answer 3

URL- . src img :

, imgURL .

<img src='{{imgURL}}' alt='any message'/>