I am following this package https://www.npmjs.com/package/react-pdf
I got the entire raw pdf data from backend so I was trying with code below.
<ReactPDF file={renderPdf}/>
But it displayed "Failed to load PDF file." I don't wish to save any file in local. The best approach is the display the pdf with the raw data provided by backend.
In terminal, it logged the error:
URIError: Failed to decode param '/%PDF-1.4%%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%20ReportLab%20Generated%20PDF%20document%20http://www.reportlab.com1%200%20obj%3C%3C/F1%202%200%20R%20/F2%203%200%20R%20/F3%207%200%20R%3E%3Eendobj2%200%20obj%3C%3C/BaseFont%20/Helvetica%20/Encoding%20/WinAnsiEncoding%20/Name%20/F1%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj3%200%20obj%3C%3C/BaseFont%20/Helvetica-Bold%20/Encoding%20/WinAnsiEncoding%20/Name%20/F2%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj4%200%20obj%3C%3C/BitsPerComponent%208%20/ColorSpace%20/DeviceRGB%20/Filter%20[%20/ASCII85Decode%20/FlateDecode%20]%20/Height%20480%20/Length%2036803%20/SMask%205%200%20R%20%20%20/Subtype%20/Image%20/Type%20/XObject%20/Width%20640%3E%3EstreamGb%22-V'
it looks like you're passing the PDF data directly to the <ReactPDF>
component as the value of the file
prop. But according to the docs you need to use an object containing a data
property:
<ReactPDF
file={{
data: renderPdf
}}
/>
it seems you can also set file
to an object containing a url
property, to let ReactPDF fetch the pdf from your backend by itself, if that's easier:
<ReactPDF
file={{
url: 'http://www.example.com/sample.pdf'
}}
/>