Tải xuống tệp từ MVC 5 tới Angular 2

Question

Tôi có kinh nghiệm về phần mềm phụ trợ C# và ASP.Net MVC. Bây giờ tôi đang thực hiện nỗ lực đầu tiên của tôi trên Angular 2. Phải mất thời gian nhưng tôi thích nhất của nó. Bây giờ tôi đang mắc kẹt trên một tập tin tải về đơn giản.

Tôi đã đọc tất cả các ví dụ mà tôi tìm thấy ở đây trên Stackoverflow, nhưng tôi vẫn không nhận được ví dụ của tôi để làm việc.

Về phía máy chủ tôi có C mã này #:

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

Về phía khách hàng tôi có mã nguyên cảo này:

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

Các yêu cầu được sắp vào phía máy chủ. Mảng được tải xuống. Tôi đoán vấn đề của tôi nằm ở phía khách hàng. Ai có thể giúp tôi không?

Answer 1

Đối với tất cả người đọc trong tương lai, tôi tổng hợp tất cả ở đây. Theo đề xuất từ ​​EsDF với đề xuất từ ​​peinearydevelopment Tôi hiện đang có giải pháp làm việc. Việc chỉ định responseType là ArrayBuffer trong yêu cầu là phần quan trọng nhất và mẹo tải xuống thực sự hữu ích.

Alt 1: Tôi nghĩ Casey là đúng. Bất cứ khi nào có thể, cách dễ nhất là chỉ cần sử dụng một thẻ liên kết đơn giản trỏ đến tài nguyên máy chủ. Như trong trường hợp của tôi, đó không phải là một lựa chọn, bất kỳ lựa chọn thay thế nào khác sẽ hữu ích.

Alt 2: Phương thức openPictureInNewWindow là cách tiếp cận đơn giản và dễ hiểu. Nhược điểm là nó sẽ hiển thị một url lẻ trông như thế này: blob: http://localhost/037713d1-a8b9-4fe3-8c43-ee5998ffdc5d.

Alt 3: Phương thức downloadFile khác sẽ tiến thêm một bước và tạo thẻ liên kết tạm thời và sử dụng thẻ đó để tải xuống tệp. Điều đó sẽ cho hầu hết người dùng trông giống như cách tiếp cận bình thường. Nhưng nó không giống như một phương pháp "Góc 2" thao tác DOM, nhưng nó là một cách thân thiện với người dùng hơn, vì vậy bây giờ đó là cái tôi sẽ sử dụng. Cảm ơn tất cả các đầu vào tốt!

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

Đối với bất kỳ giá trị nào của nó, đây không chỉ là vấn đề với Angular2. Điều này có vẻ là một 'vấn đề' với các trình duyệt (hoặc có thể là một spec). Có một vài tùy chọn khác nhau mà bạn có với phương pháp này mà tôi biết.

1. Khi bytearray được trả về cho trình duyệt, bạn có thể làm một cái gì đó như thế này: 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);

2. Cách tiếp cận khác tôi biết là để tạo ra các tập tin trên máy chủ tại một con đường tạm thời và sau đó trả lại kết quả chuyển hướng cho người dùng có id xác định tệp đó (thường là lần GUID) và có tuyến đường được chuyển hướng để trả về kết quả tệp của bạn.

Answer 3

Nếu bạn nhìn thấy hình ảnh trong trình duyệt cho url phụ trợ của ứng dụng. Sau đó, bạn có thể trực tiếp gán nó cho src của img trong đánh dấu thành phần như sau:

giả sử bạn khai báo trường bằng imgURL trong thành phần và khởi tạo nó bằng phương pháp tác vụ hình ảnh phụ trợ của bạn. sau đó trong đánh dấu, bạn có thể làm như vậy

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