I'm trying to use the react-pdf library to display a base64 encoded PDF file. The B64 data is accurate, as it loads in an iframe as such:
<iframe
className={css.previewIframe}
src={`data:application/pdf;base64,${
this.props.encodedPdf
}`}
/>
However, if I insert the data into a react-pdf document as such, I get an error:
<Document file={this.props.encodedPdf} />
The Document is rendered with an error message Failed to load PDF file., and the console logs the following error: InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
I also get a lot of warnings like the following: Warning: Ignoring invalid character "109" in hex string
The documentation clearly states that the file prop can be B64 encoded content. Any idea on what the issue could be? Here is the B64 data if needed:
JVBERi0xLjMKMSAwIG9iago8PAovS2lkcyBbIDMgMCBSIF0KL1R5cGUgL1BhZ2VzCi9Db3VudCAxCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9kdWNlciAoUHlQREYyKQo+PgplbmRvYmoKMyAwIG9iago8PAovQ29udGVudHMgNSAwIFIKL1JvdGF0ZSAwCi9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgPDwKL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0KPj4KL0Nyb3BCb3ggWyAwIDAgNjEyIDc5MiBdCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCAxMAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KSIkCCDAAAAAAAQplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA2CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDY4IDAwMDAwIG4gCjAwMDAwMDAxMDggMDAwMDAgbiAKMDAwMDAwMDI3MyAwMDAwMCBuIAowMDAwMDAwMzIyIDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNgovUm9vdCA0IDAgUgovSW5mbyAyIDAgUgo+PgpzdGFydHhyZWYKNDAzCiUlRU9GCg==
If I add data:application/pdf;base64, to the beginning of the string, there are no errors, but also nothing is rendered.
The issue was:
I needed data:application/pdf;base64, in front of the string
I did not have a component inside of my component. See https://github.com/wojtekmaj/react-pdf/issues/203
Related
so im trying to get data from DB, but i get this error and i dont know how to fix it.
this is where im fetching the data -
this is where im trying to print it -
this is my he.json file constants -
everything is printed but with error -
How handle "missing message" error in react-intl?
You can add your own custom function.You might be having a the id missing in the corresponding json.
Header field in Postman:
--header 'Dropbox-API-Arg: {"path": "/テスト自動化/test.xlsx"}'
And next to this field has an warning:
value contains non iso 8859 1 characters
I got error response when sending request:
Could not send request
Error: Invalid character in header content ["Dropbox-API-Arg"]
Could someone have any idea to fix it?
Try selecting the text in Postman and right clicking, then select EncodeURIComponent in the context menu
I am trying to parse page A, download files listed in the page to local disk, replace URL in page A with URL to the files I saved, and finally save page A to local disk.
I tried file pipeline but it just does not work. The URL in page A looks like http:...php?id=1234 so build-in file_path() returns an error. Overriding file_path() just stops pipeline working without any debug output.
So I found this post:
Answer I referred
After I applied I found the parsing function won't change the data I passed in meta. My code is like:
def ParseClientCaseNote(self,response):
# The function is to download all attachments and replace URL inside pointing to local files
TestMeta='this is to test meta argu'
for a in AttachmentList:
yield scrapy.Request(a,callback=self.DownClientCaseNoteAttach,meta={'test':TestMeta})
self.logger.info('ParseClientCaseNote: after call DownClientCaseNoteAttach, testmeta is: ' + TestMeta)
return
def DownClientCaseNoteAttach(self,response):
TestArg=response.meta['test']
self.logger.info('DownClientCaseNoteAttach: test meta')
self.logger.info(TestArg)
TestArg='this is revised from DownClientCaseNoteAttach'
with open(AbsPath,'wb') as f:
f.write(response.body)
return
I got below result in log:
2018-09-29 09:26:13 [debug] INFO: ParseClientCaseNote: after call DownClientCaseNoteAttach, testmeta is: this is to test meta argu
2018-09-29 09:26:17 [debug] INFO: DownClientCaseNoteAttach: test meta
2018-09-29 09:26:17 [debug] INFO: this is to test meta argu
It seems parsing function is deferred. How can I get the result correctly?
Thanks
I used a workaround to address this. In page A I get file name on web and pass the name to own download function change the url pointing to local file with name on web.
In download function I verify the file name from response.headers['Content-Disposition'].decode(response.headers.encoding) to ensure it is the same as I find on page A before save it.
I am trying to show a static pdf in React app. I have tried a lot of packages:
react-pdf
react-pdf-js
react-pdf-js-infinite
simple-react-pdf
pdfjs-dist
react-pdf-pages
They often say that we can use the URL, or pdf file for the props for the PDF component easily, but I cannot use either.
I had two main errors.
As I want to use myPDF for the props for the component, I write this:
import myPDF from 'path/to/pdf_file';
then, render_some_component pdf:{myPDF}
Here is the error:
ModuleParseError in
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
(When I comment that line, this kind of error disappears)
I used the file-loader in webpack config, I have tried many different ways but failed.
I use the pdf file directly for the props like this:
render_some_component pdf:{'path/to/pdf_file'}
In the Console:
Warning: Setting up fake worker.
11:23:55.962 pdf.worker.js:349 Warning: Ignoring invalid character "33" in hex string
11:23:55.963 pdf.worker.js:349 Warning: Ignoring invalid character "79" in hex string
...
There are a lot of 'Ignoring invalid character' like that and it always ends with:
localhost/:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
In the Network, Headers, I see:
Request URL:http://localhost:3000/myPdfFile.pdf
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000
but In the Network, Response, I see just the HTML layout.
I think the pdf file is loaded correctly but the package cannot recognize its PDF structure.
Except that two main errors, I had another error related to the Worker used in the packages but I don't know how to fix it:
Uncaught DOMException: Failed to construct 'Worker'
(This is something relates to Chrome as people say Chrome does not allow Worker in the local server)
Any help is highly appreciated as I am stuck in this in 4 days already.
Can you pleas clarify what you main task is?
If I understood it right you want to display a PDF file that already exists in a part of your application? You don't want to create a new PDF with JavaScript.
If you want to just show a PDF have you tried to use iframe?
Something like this:
<iframe
title="file"
style={{ width: '100%', height: '100%' }}
src={downloadURL}
/>
You ca use here also relative paths to the file from the location where your Component is or use full URLs to the file.
When I try to access the pdf file which is public using the angular-pdf-viewer I got the following error message on console.
Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://pucdocket.s3.amazonaws.com/VA/PUE-2010-00039/122913.pdf] starting at [://pucdocket.s3.amazonaws.com/VA/PUE-2010-00039/122913.pdf].
here is my pdf directive for rendering the pdf file:
<pdf-viewer delegate-handle="my-pdf-container" url="http://pucdocket.s3.amazonaws.com/VA/PUE-2010-00039/122913.pdf" scale="1" show-toolbar="true" ></pdf-viewer>
could anyone help on this issue?
all the samples seems to be suggesting define url on scope and reference it. But you may try the following, which stringifys the url
<pdf-viewer delegate-handle="my-pdf-container" url="'http://pucdocket.s3.amazonaws.com/VA/PUE-2010-00039/122913.pdf'" scale="1" show-toolbar="true" ></pdf-viewer>