tải xuống tệp xlsx ở góc 2 với blob

Question

Tôi muốn tải xuống tệp xlsx từ ứng dụng khách trên góc 2 bằng cách sử dụng api còn lại.

Tôi nhận được một mảng byte như là một phản hồi từ yêu cầu GET của tôi và tôi gửi nó cho tải về chức năng với đăng ký:

let options = new RequestOptions({ search: params }); 
this.http.get(this.restUrl, options) 
      .subscribe(this.download); 

tải về chức năng sử dụng blob:

download(res: Response) { 
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' }); 
FileSaver.saveAs(data, this.fileName);}; 

của tôi vấn đề là tập tin của tôi bị hỏng tất cả các thời gian. Tôi đã thử rất nhiều phiên bản nhưng không có tác dụng gì.

** cũng đã thử giải pháp này và nó không hoạt động (tệp xlsx vẫn bị hỏng) - Angular 2 downloading a file: corrupt result, sự khác biệt là dữ liệu của tôi là bộ đệm mảng chứ không phải chuỗi hoặc json, và có sự khác biệt giữa PDF và xlsx.

10x!

Answer 1

Sau khi không có tác dụng. tôi đã thay đổi máy chủ của tôi để trả lại cùng một mảng byte với việc bổ sung:

response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); 
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx"); 

Tại khách hàng của tôi Tôi đã xóa các chức năng tải về và thay vì phần GET tôi đã làm:

window.open(this.restUrl, "_blank"); 

Đây là cách duy nhất tôi thấy nó có thể lưu một tập tin xlsx mà không bị hỏng.

Nếu bạn có một câu trả lời về cách để làm điều đó với blob xin vui lòng cho tôi biết :)

Answer 2

Các giải pháp sau đây làm việc cho tôi trong Google Chrome Version 58.0.3029.110 (64-bit).

Đây là một bài báo giải thích làm thế nào để tải về một pdf sử dụng một Blob: https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

Đó là nguyên tắc tương tự cho một xlsx. Chỉ cần làm theo các bước từ bài viết và thay đổi hai điều:

• Header, thay vì { 'Chấp nhận': 'application/pdf'}, {sử dụng 'Chấp nhận': 'application/vnd.openxmlformats-officedocument.spreadsheetml .tấm'};
• Blob, sử dụng cùng loại cho việc tạo Blob của bạn, Blob mới ([tệpBlob], {loại: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}).

Bài viết đang sử dụng Trình tiết kiệm tệp nhưng tôi đã không làm như vậy. Tôi để lại một bình luận, trong bài viết, với một lời giải thích cơ bản về những gì tôi đã sử dụng thay vì File Saver.

Answer 3

Tôi đã gặp sự cố tương tự như của bạn - đã khắc phục sự cố bằng cách thêm responseType: ResponseContentType.Blob vào tùy chọn Nhận của tôi. Kiểm tra mã bên dưới:

public getReport(filters: ReportOptions) { 
    return this.http.get(this.url, { 
      headers: this.headers, 
      params: filters, 
      responseType: ResponseContentType.Blob 
     }) 
     .toPromise() 
     .then(response => this.saveAsBlob(response)) 
     .catch(error => this.handleError(error)); 
} 

SaveAsBlob() chỉ là trình bao bọc cho Trình bảo vệ tệp.SaveAs():

private saveAsBlob(data: any) { 
    const blob = new Blob([data._body], 
     { type: 'application/vnd.ms-excel' }); 
    const file = new File([blob], 'report.xlsx', 
     { type: 'application/vnd.ms-excel' }); 

    FileSaver.saveAs(file); 
} 

Answer 4

bạn có thể sử dụng đoạn mã sau:

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
}); 
saveAs(file,"nameFile"+".xlsx"); 
deferred.resolve(data); 

Answer 5

Dưới đây là giải pháp hỗ trợ trình duyệt IE và các trình duyệt Chrome/Safari. Đối tượng 'response' này là phản hồi nhận được từ dịch vụ. Tôi có điều này làm việc cho kho lưu trữ. Bạn có thể thay đổi loại theo phản hồi nhận được từ dịch vụ.

let blob = new Blob([response], {type: 'application/zip'}); 
    let fileUrl = window.URL.createObjectURL(blob); 
    if (window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.zip'); 
    } else { 
     this.reportDownloadName = fileUrl; 
     window.open(fileUrl); 
    }