请求完成时，如何在 React js 中访问 api 调用的响应数据？

Question

Actually I am getting pdf bytes from api call and I want to show pdf data as content is being downloaded but I am not able to access response data before the request is completed and for large pdf files I have to wait for few seconds for request to get completed and display it.

Answer 1

For this question there are 4 generic types of "PDF"

1. A Text reprex of a PDF (thus not a PDF) often served as a base64 text data uri stream that is downloaded and converted in the browser into a true PDF. It is thus ideal for very small files streams but the delay is that it is must be inflated to transmit, then 100% received and converted (re-compressed) in the device before the same behaviour as a true PDF thus the slowest to transmit and slowest to view.

2. A standard PDF which has a sting in its tail that it cannot be viewed until the full file has been downloaded and the trailer xref table can point to where the myriad of bits of page 1 can be found thus takes time to decompress and decompile the screen stream graphics. Thus streaming is of no value for early viewing, only faster transportation than base64.

3. A Liniarized PDF, this has been designed to show page 1 on arrival, since it keeps part of the tail at the head of the file (hence the term Web optimised) However it has the same need to download fully into the device before ALL the pages can be viewed. Here described by PDFTron https://www.pdftron.com/blog/mobile/streaming-a-pdf-from-the-web/

4. A specialist streaming transmission where the pdf is chunked and sent to a specialist viewer that re-assembles the parts as required. Thus is a commercial solution. One example I can think of is PDFTron. Not strictly your average PDF file method of transmission, so unlikely to be seen in general public PDF viewers.

Thus in answer to your question you need to convert your PDFs to be "Linearized"

Answer 2

You probably want to stream the data using a streams API .

Here is an example of a png being loaded (in "chunks"): https://mdn.github.io/dom-examples/streams/png-transform-stream/

(You'll need to disable caching and throttle your inte.net speed in dev tools to see it load in pieces).

I believe PDF.js supports streaming