使用 Angular 下载 .xls 文件：JSON.parse (<anonymous>) 位置 0 处的 JSON 中的意外令牌 P

Posted 2023-03-13

【中文标题】使用 Angular 下载 .xls 文件：JSON.parse (<anonymous>) 位置 0 处的 JSON 中的意外令牌 P

【英文标题】：Download .xls file using Angular: Unexpected token P in JSON at position 0 at JSON.parse (<anonymous>)

【发布时间】：2019-03-21 17:28:20

【问题描述】：

我有以下服务器方法可以为存储在Azure Blob Storage 中的xls 文档返回byte[]。

[FunctionName("ReadBatchFile")]
        public async static Task<HttpResponseMessage> ReadBatchFile([HttpTrigger(AuthorizationLevel.Function, WebRequestMethods.Http.Get, Route = "Agreements/ReadBatchFile")]HttpRequestMessage req, TraceWriter log)
        
            try
            
                var fileName = req.GetQueryNameValuePairs()
                   .FirstOrDefault(q => string.Compare(q.Key, "fileName", true) == 0)
                   .Value;
                var response = new HttpResponseMessage(HttpStatusCode.OK);
                response.Content = new ByteArrayContent(await AzureHelpers.ReadFromBlobStorage(fileName));  //returns byte[] 
                response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")  FileName = fileName ;
                response.Content.Headers.ContentType =
                    new MediaTypeHeaderValue("application/octet-stream");
                return response;
            
            catch (Exception ex)
            
                log.Error(ex.Message);
                req.CreateResponse(HttpStatusCode.InternalServerError);
            
            return req.CreateResponse(HttpStatusCode.BadRequest);
        

从上面可以看出，response.Content被设置为ByteArrayContent，而我的contentType是application/octet-stream。

在Angular，我的服务中有以下方法调用上述函数。

readBatchFile(fileName: string): Observable<Blob> 
    let endpoint = environment.endpoints.agreement.baseUrl + environment.endpoints.agreement.readBatchFile + "&fileName=" + fileName;
    const httpOptions = 
      headers: new HttpHeaders( contentType: 'application/octet-stream' ); //application/vnd.ms-excel   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
    return this.http.get<Blob>(endpoint, httpOptions);
  

虽然我指定contentType 是application/octet-stream，并且我的get 方法应该返回Blob 类型，但我仍然收到以下错误：

JSON.parse 中位置 0↵ 的 JSON 中的意外标记 P ()

为什么Angular 仍然看到来自服务器的响应为JSON？

更新

这是我的请求标头：

Accept: application/json, text/plain, */*
Authorization: Bearer ...
Origin: http://localhost:4200
Referer: http://localhost:4200/batches
responseType: application/octet-stream
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/69.0.3497.100 Safari/537.36

响应标头：

Access-Control-Allow-Origin: *
Cache-Control: no-cache
Content-Disposition: attachment; filename=B4debe034-efc6-416f-8082-422a4122a857_MTN_Upgrade_20181017_T065548.xls
Content-Length: 3011
Content-Type: application/octet-stream
Date: Wed, 17 Oct 2018 06:55:48 GMT
Expires: -1
Pragma: no-cache
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

以及回应：

PKø6QMäH­¯3[Content_Types].xmlµÏJ1Æ_eÉU´D¤ÛªU°>ÀÌvCóÌ´¶oo6+"¥z$ßÌ÷ý3_¼köÉÆÐÆM+ÞÖ[ÑC0àbÀVÄr1_RSfµ¢gNwJîÑÉ0¥ÙkÞ¨zT×ÓéÒ10ðà!óì`ç¸Yïu+ %g5pÁRÅL4"Ã]ýanÌ    ÌäDftµzèê4 ¨4$<ÉÖà¿"b×Y&ê/#RF0Ô#²w²VéÁ1ô2?/®êàÔGÌÛ÷·²j"êù·ü*ªevAâ£C:G1*î!£yå\ü<ÁÏoU~ñ   PKäH­¯3PKø6QMÚë®'_rels/.relsÏÁ0àWYzc1ájðæVÖe
oïb<xlú÷ûÓ²^æ=Ѭ"Ë¡U¤kÜÚËî,DiµÈ¢ÔUyÅIÆtúÁô1ºçAõ8ËC6ùYÆ4zÃT£4È÷y~àþÓ­É-À7ºÖ®ÿ±©ëgRmüQñH²ô£eâ/òãhÌ
¼*ùæÁê
PKÚë®'PKø6QMæl($×Sxl/workbook.xmlO½NÄ0~È;ÂpBUÛ`9    éHkt]9)åÝx$^ôª
F&ö÷cûûó«9|Ä ÞQgjávWB²Ü:·0ews®Y.oÌUÔjiaÈy¬µNvÀhÒG¤Â9hriå¬Ù9oñí²¾«ª½&Miðc5í?Yi4skT4 k«^=Îé÷È¥Uºkôîjݪ"±$Muûò>(©rì^26£5Á>rSèÍêXTÛêîPKæl($×SPKø6QMb¢Ö4xl/_rels/workbook.xml.rels­ÏjÃ0_Åè¾8é`Q·1èµ@ØJØÆÒÚåík6VR(cdôý>¬åúkÔ2÷1hª]:ýÇÓ+(ÈÀDëÕrKJYaß'VØIoZ³õ4"W1Q(/mÌ#Jis§Ú#v¤uý¢ó·LµqòÆ5 öS¢ÿ°cÛöÞ£ý)ÈùÈH
sGbà:bý]ªPAßY<ReÊ_^M~ú¿âï1ÛI.[ÌÇ¿2úæÚ«PKb¢Ö4PKø6QMÄΫhïxl/worksheets/sheet1.xmlËr0F_a_Ðýâ±Iã:ñ®ÓE»¦¶äpwë¢ÔW¨ÀÄ7 Ðù~I
ðïÏßùÃG~Þ±.!@¨b«wYñºOåþó³6o6Uª^ØYiYgql·©Êé£*\ß^<)Ý¥yõ~mÕJoO¹*ÊÀb£Ié²iv´á¥Ú=µìѨdWO!?\JåIVËù.sÕ«ÙFíá#mHÄËy
ÿÌÔÙÞ´j%¿µ~«.6»Ej6öàu=øwìÔ>9Êúü¢²×´thÙê­AUê O>êó9Û©k¡!Â\ÇödKÿjºÃø&8jã<J±LFã¸ãÛÑ!Å  $ÆI'·q! ¥
Î)<mâôÇe!8ÀÑÑ8kâìÀ
/³Ñ8oâüg#&¥ «M\\ã p½Clâò§nòHp¡tÒñeóÔ;mÉrnô90U¯+]5q[oO·ã¬»û¾óø½6ÄW]âÉ'PXùîß|tµOÐ.ñì¬K¼øï-;­BÔ*D^DöúìY~@zWH-c    "$§C"z6§«­ÞS@zíezeQ¤£·Jñ¤Rð ¥ø~¥ÓÕÖH_éÒW:½²Í(ÒQJZ¥dR©OxJ¾Rr¿Òéj뤯té+^Ùf¹(oÞ£©ûMPf­u©Lýeo]ÿPKÄΫhïPKø6QM"tÛ4SÎ
xl/styles.xmlR½nà ~ÄÞGjUU¶3T²Ô%K:tÅ6ØHp ÀÝWëÐGê+°8Q¥Lw|þ~ð?_ßù~TuBC³Í#nt<xÆû2w~ìØ3æQà+pï½y!Ä5=SÔm´a¾pmõáh;âe´uQ¤$Ùm·ODQ¸ÌaPò5z_àIÊk¸@üNT$K, ÍÀ+¢¶"¡dæ¦âRHy¶Úá(sC½gªp@Kÿ>V`ÐÀD¼Cï,²ÝãZJH®µmÃ,׿1Ce.÷QaEקÆkK­½×*v­ *ïliwä<Æ=|ð«£y omeÂÒF£µl6¹£§ÆÈé0¨Ù*­3ÒÖ®PéYF~vÎI©WQgÅ=øýåÊ£ôþ»~0mG~óhÈåa¿PK"tÛ4SÎPKø6QMPùûxl/sharedStrings.xmlm]k0ÿJÈh][Z2è2Ðþ ÇfsÛ¿_ÆØÖË<ÏÄ=±wp8Zð`/9ÓØv4ÂoõóîÌ2­¬rvIcDbþªÁDó£Ø îíÆÎ:­È]/pv ZHO"ò(´
g]ù²gßÈþ/1¦1¥Eu­ò2ÆâüÐêZ°Ò®ijÇ2ÛÂRtÇ^TóªzØÌÿºZ¹±ë6#O
ù¥1¾o$h×¾¨Kû¥mñÌj
píä)ÑÃñt^WdT6p åNkq§þ!ü¦_PKPùûPK-ø6QMäH­¯3[Content_Types].xmlPK-ø6QMÚë®'Y_rels/.relsPK-ø6QMæl($×S@xl/workbook.xmlPK-ø6QMb¢Ö4Txl/_rels/workbook.xml.relsPK-ø6QMÄΫhïrxl/worksheets/sheet1.xmlPK-ø6QM"tÛ4SÎ
 xl/styles.xmlPK-ø6QMPùû®xl/sharedStrings.xmlPKÂë   

【参考方案1】：

从 Angular 9 开始，支持四种响应类型：'arraybuffer'|'blob'|'json'|'text'。

对于你想使用blob响应类型的文件内容，你可以像这样直接在get-request中设置：

return this.http.get(endpoint,  responseType: 'blob');

更多信息请参阅文档中的here。

您的content-type 标头仅用于请求标头，不会影响响应。

旧答案（最高 Angular 8）

你可以像这样直接在get-request中设置responseType：

return this.http.get(endpoint,  responseType: 'application/octet-stream');

【讨论】：

我试过这个。在控制台中仍然得到相同的错误

你能发布发送的请求和收到的响应吗？

您更新的数据看起来一切正常。我的错误，显然 responseType 不是标头参数，而是 Angular HttpClient 参数。我更新了答案。

在 Angular 8 中执行此操作时（使用 HttpClient）我收到错误“Type '"application/octet-stream"' is not assignable to type '"json"'.ts" 有没有类似的Angular 8 的解决方案，在哪里必须使用 HttpClient？

@ddagsan 我同时解决了这个问题，在下面查看我的答案

【参考方案2】：

希望它能帮助任何人..

  responseType: 'blob' as 'json'

不进入 headers 对象..

【参考方案3】：

我通过使用 responseType blob 并稍后在 BlobPropertyBag 中设置类型解决了 Angular 9.1.4 中的问题，例如对于 Excel 文件：

 return this.httpClient.get(url, 
  responseType: 'blob',
  params: queryParams
)
  .pipe(
    map((res: any) => 
      const blob = new Blob([res], type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
      return blob;
    )
  );

【参考方案4】：

我在 angular 9.1.0 上使用以下代码解决了这个问题：

result = this._httpClient.get(url,

  responseType: 'blob',
  headers: headers
);

【讨论】：

如果它不允许您简单地更改响应类型，您可以使用 responseType: 'blob' as 'json');

【参考方案5】：

对于 Angular 8+

return this.http.get(endpoint,  responseType: 'blob');

return this.http.post(endpoint, postParams,  responseType: 'blob');

这很微妙，但是如果您查看文档，您会注意到 http.post 和 http.get 在我们设置 responseType: 'blob' 时不采用 <T> 的通用返回类型。所以我们不再需要http.get<Blob> 中的<Blob> 部分。仔细想想，这是有道理的，因为我们告诉 HttpClient 响应的类型是 blob 和 responseType: 'blob'。

https://angular.io/api/common/http/HttpClient#post

如果您需要除“blob”之外的其他内容，这里还有其他可用于 responseType 的选项。

responseType: 'arraybuffer' | 'blob' | 'json' | 'text'

https://angular.io/api/common/http/HttpRequest#responseType

【讨论】：

角度 8+ 的结果相同