Open PDF from a blob react-native (expo)
Asked Answered
E

1

7

I'm new here and I'm doing my first app with react-native and expo and I encountered a problem with a PDF response from an API.

The objective here is to be able to call the API and receive an application/pdf response and download it whenever you press a button. All this works smoothly but I can't manage any way to interpret the pdf response and do something out of it.

Some ways I've tried :

  • interpret it in a pdfViewer
  • Download it with Expo FileSystem
  • Open it in a new window or a webView
  • use rn-fetch-blob (can't because of expo)
  • use Print.printToFileAsync
  • ...

Most problems come from the fact that I need an uri from the file to do anything with it but it looks like I can't create an url from a Blob. I get this error when I try to createObjectURL

Error: Cannot create URL for blob!

// Working API Call
  response = await axios.get(apiUri.DownloadDocument +id) this.props.id);

// Blob creation
  const file = new Blob(
    [response.data],
    {type: 'application/pdf'});

// This line throws an error
  const fileURL = URL.createObjectURL(file);
  WebBrowser.openBrowserAsync(fileURL);

If I call the API with POSTMAN, he can't preview the response but I can download it and it's the pdf file with no problem.

This issue might be related to those 62387371 59622283 55507959

I might be doing it totally the wrong way since i'm new to this. Thanks for your time and expertise. Here is the output of the response from the API I get with console.log(response.data)

o << /Registry (Adobe) /Ordering (Identity) /Supplement 0 >>
/FontDescriptor 28 0 R
/CIDToGIDMap /Identity
/W [0 [595 606 629 610 608 389 408 610 315 856 608 276 517 607 629 630 276 693 629 631 631 315 631 496 571 293 742 679 553 679 781 627 598 764 334 545 349 630 630 631 631 358 631 631 631 334 966 631 992 315 587 587 630 681 630 ]
]
>>
endobj
31 0 obj
<< /Length 742 >>
stream
/CIDInit /ProcSet findresource begin
12 dict begin
begincmap
/CIDSystemInfo << /Registry (Adobe) /Ordering (UCS) /Supplement 0 >> def
/CMapName /Adobe-Identity-UCS def
/CMapType 2 def
1 begincodespacerange
<0000> <FFFF>
endcodespacerange
2 beginbfrange
<0000> <0000> <0000>
<0001> <0036> [<0054> <0068> <00E9> <00E2> <0074> <0072> <0065> <0020> <004D> <0061> <0069> <0073> <006F> <006E> <0064> <006C> <0043> <0075> <0031> <0035> <002C> <0030> <005F> <0046> <0049> <004E> <0041> <004C> <0056> <004F> <0045> <0050> <0044> <003A> <0063> <0066> <0062> <0067> <0032> <0039> <002D> <0038> <0033> <0036> <002F> <006D> <0037> <0040> <002E> <0076> <0078> <0070> <0042> <0071> ]
endbfrange
endcmap
CMapName currentdict /CMap defineresource pop
end
end

endstream
endobj
7 0 obj
<< /Type /Font
/Subtype /Type0
/BaseFont /DejaVuSans
/Encoding /Identity-H
/DescendantFonts [30 0 R]
/ToUnicode 31 0 R>>
endobj
2 0 obj
<<
/Type /Pages
/Kids 
[
5 0 R
]
/Count 1
/ProcSet [/PDF /Text /ImageB /ImageC]
>>
endobj
xref
0 33
0000000000 65535 f 
0000000009 00000 n 
0000025854 00000 n 
0000000157 00000 n 
0000000252 00000 n 
0000000690 00000 n 
0000015892 00000 n 
0000005735 00000 n 
0000006000 00000 n 
0000014618 00000 n 
0000015070 00000 n 
0000014597 00000 n 
0000016033 00000 n 
0000016293 00000 n 
0000024494 00000 n 
0000024924 00000 n 
trailer
<<
/Size 33
/Info 1 0 R
/Root 13 0 R
>>
startxref
25952
%%EOF
Endolymph answered 22/8, 2020 at 19:43 Comment(0)
F
1

There is an answer to it in this thread:

The best way I found to handle PDF files with Expo is to use buffer to turn them into base64 files, store them in the FileSystem and Share them:

https://mcmap.net/q/1248255/-view-pdf-from-url-in-expo-react-native-project

Firstly answered 4/11, 2022 at 10:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.