Slim 4 + Angular 10:下载PDF API 在 Angular Blob 响应中返回空数据

huangapple go评论111阅读模式
英文:

Slim 4 + Angular 10 : donwload pdf api is returning empty data in angular blob response

问题

我正在尝试集成下载 PDF 的 Angular API 与 Slim 4 API。我可以在浏览器网络中看到来自 Slim 的响应,但当我尝试在 Angular 中解析响应时,它返回为空。我已在 Angular 和 Slim 的请求头中添加了必需的标头。

Angular 代码:

  1. const blobHeaders = {
  2. 'Accept': 'application/pdf, application/json, text/plain, */*',
  3. 'Content-Type': 'application/json'
  4. };
  5. getInvoiceDetail(orderId, transId, customerId, brandId): Promise<any> {
  6. return this.http
  7. .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders, responseType: 'blob', observe: 'response' })
  8. .toPromise()
  9. .then(response => {
  10. console.log("---------main----------" + JSON.stringify(response))
  11. return response;
  12. })
  13. .catch(this.commonService.handleError);
  14. }

上面的 API 控制台返回如下内容:

  1. ---------main----------{"headers":{},"status":200,"statusText":"OK","url":"https://test.com/v1/orders/invoice/181/145/995/8","ok":true,"type":4,"body":{}}

Slim4 代码:

  1. $response = new Response();
  2. $csv_file = '/invoice/2023/06/14/2023FS00000165.pdf';
  3. $response = $response
  4. ->withHeader('Content-Type', 'application/pdf')
  5. ->withHeader('Content-disposition', 'attachment; filename="test.pdf"')
  6. ->withHeader('Access-Control-Expose-Headers', '*')
  7. ->withHeader('Content-Description', 'File Transfer')
  8. ->withHeader('Content-Transfer-Encoding', 'binary')
  9. ->withHeader('Expires', '0')
  10. ->withAddedHeader('Cache-Control', 'must-revalidate, post-check=0, pre-check=0')
  11. ->withHeader('Cache-Control', 'post-check=0, pre-check=0')
  12. ->withHeader('Pragma', 'no-cache')
  13. ->withBody((new \Slim\Psr7\Stream(fopen($csv_file, 'rb'))));
  14. return $response;

从服务器获取到的 blob 响应如下:

Slim 4 + Angular 10:下载PDF API 在 Angular Blob 响应中返回空数据

我参考了许多帖子并发现需要在服务器端设置 'Access-Control-Expose-Headers'。我也已经这样做了,但仍然面临这个问题。

英文:

I am trying to integration download pdf angular api with slim 4 api. I can see the response returning from the slim on browser network, but when I try to parse the response in angular it is returning empty. I have added the required headers on both angular and slim.

Angular code:

  1. const blobHeaders = {
  2. &#39;Accept&#39; : &#39;application/pdf, application/json, text/plain, */*&#39;,
  3. &#39;Content-Type&#39; : &#39;application/json&#39;
  4. };
  5. getInvoiceDetail(orderId, transId, customerId, brandId) : Promise&lt;any&gt; {
  6. return this.http
  7. .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders , responseType : &#39;blob&#39;, observe : &#39;response&#39;})
  8. .toPromise()
  9. .then(response =&gt; {
  10. console.log(&quot;---------main----------&quot;+JSON.stringify(response))
  11. return response;
  12. })
  13. .catch(this.commonService.handleError);
  14. }

The above API console is returning the below:

  1. ---------main----------{&quot;headers&quot;:{&quot;normalizedNames&quot;:{},&quot;lazyUpdate&quot;:null},&quot;status&quot;:200,&quot;statusText&quot;:&quot;OK&quot;,&quot;url&quot;:&quot;https://test.com/v1/orders/invoice/181/145/995/8&quot;,&quot;ok&quot;:true,&quot;type&quot;:4,&quot;body&quot;:{}}

Slim4 code:

  1. $response = new Response();
  2. $csv_file = &#39;/invoice/2023/06/14/2023FS00000165.pdf&#39;;
  3. $response = $response
  4. -&gt;withHeader(&#39;Content-Type&#39;, &#39;application/pdf&#39;)
  5. -&gt;withHeader(&#39;Content-disposition&#39;, &#39;attachment; filename=&quot;test.pdf&quot;&#39;)
  6. -&gt;withHeader(&#39;Access-Control-Expose-Headers&#39;, &#39;*&#39;)
  7. -&gt;withHeader(&#39;Content-Description&#39;, &#39;File Transfer&#39;)
  8. -&gt;withHeader(&#39;Content-Transfer-Encoding&#39;, &#39;binary&#39;)
  9. -&gt;withHeader(&#39;Expires&#39;, &#39;0&#39;)
  10. -&gt;withAddedHeader(&#39;Cache-Control&#39;, &#39;must-revalidate, post-check=0, pre-check=0&#39;)
  11. -&gt;withHeader(&#39;Cache-Control&#39;, &#39;post-check=0, pre-check=0&#39;)
  12. -&gt;withHeader(&#39;Pragma&#39;, &#39;no-cache&#39;)
  13. -&gt;withBody((new \Slim\Psr7\Stream(fopen($csv_file, &#39;rb&#39;))));
  14. return $response;

Getting this blob response from the server
Slim 4 + Angular 10:下载PDF API 在 Angular Blob 响应中返回空数据

I referred many posts and found need to set 'Access-Control-Expose-Headers' in server side. I did the same too, still facing the issue.

答案1

得分: 0

以下是已经翻译好的代码部分:

  1. This is working after I changed the 'responseType : text' instead on blob.
  2. getInvoiceDetail(orderId, transId, customerId, brandId) : Promise<any> {
  3. return this.http
  4. .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders , responseType : 'text', observe : 'response'})
  5. .toPromise()
  6. .then(response => {
  7. console.log("---------main----------"+JSON.stringify(response))
  8. return response;
  9. })
  10. .catch(this.commonService.handleError);
  11. }
英文:

This is working after I changed the 'responseType : text' instead on blob.

getInvoiceDetail(orderId, transId, customerId, brandId) : Promise<any> {
return this.http

  1. .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders , responseType : &#39;text&#39;, observe : &#39;response&#39;})
  2. .toPromise()
  3. .then(response =&gt; {
  4. console.log(&quot;---------main----------&quot;+JSON.stringify(response))
  5. return response;
  6. })
  7. .catch(this.commonService.handleError);
  8. }

huangapple
  • 本文由 发表于 2023年6月15日 16:41:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76480669.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定