angular - 在 Angular2 中将 Blob 保存为 xlsx

Question

我在 Angular2 应用程序中保存 xlsx 时遇到了一些问题:

this._http.get('/api/file).subscribe(success=>{
                var blob = new Blob([success.json()], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });
                var downloadUrl= window.URL.createObjectURL(blob);
                window.open(downloadUrl);

            }, error=>{

            });

我从后端收到的响应格式如下:

PK�q�H_rels/.rels���j�0��}
�{㴃1F�^Ơ�2��l%1I,c�[��3�l
l�����H��4��R�l��·����q}*�2�������;�*��
t"�^�l;1W)�N�iD)ejuD�cKz[׷:}g����@:�.... etc

有什么我做错的想法吗？

Answer 1

问题是不支持开箱即用的二进制响应内容。您需要“手动”设置底层 XHR 对象的响应类型

作为解决方法，您需要扩展 Angular2 的 BrowserXhr 类，如下所述，以将底层 xhr 上的 responseType 设置为 blob对象:

import {Injectable} from 'angular2/core';
import {BrowserXhr} from 'angular2/http';

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.responseType = "blob";
    return <any>(xhr);
  }
}

在提供程序中注册此类时要小心，因为它是全局的。您应该只在执行请求的组件中设置它。在你的例子中，你得到了响应数据的字符串表示...

@Component({
  (...)
  providers: [
    provide(BrowserXhr, { useClass: CustomBrowserXhr })
  ]
})
export class ...

然后您需要从响应对象的_body 属性中获取数据。你应该正常使用，因为它是一个内部的，但现在没有其他方法:

this._http.get('/api/file).subscribe(success => {
  var blob = new Blob([success._body], {
               type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  var downloadUrl= window.URL.createObjectURL(blob);
  window.open(downloadUrl);
}, error=>{
  (...)
});

有关详细信息，请参阅此问题:

• Angular 2 download PDF from API and Display it in View