Pdf with image is not displayed in iframe
Question
I try to use an iframe to display the a PDF file using a base64 string. But when a PDF contains text and images it shows a white screen instead of displaying the actual PDF.
Can anyone tell me how to display the PDF in iframe.
var pdf = $window.open("");
pdf.document.write(
"<iframe width='800px' height='800px' src='" +
encodeURI(base64Url) +
"'></iframe>"
);
Updated Pdf File:
Base64 File Link: Base64 of Pdf
1 answers
solution1
0 2018-05-15 10:30:09
Did you tried google viewer to display your PDF?
<html> <body> <object data="http://www.pdf995.com/samples/pdf.pdf" type="application/pdf"> <iframe src="https://docs.google.com/viewer?url=http://www.pdf995.com/samples/pdf.pdf&embedded=true"></iframe> </object> </body> </html>
You need to replace http://www.pdf995.com/samples/pdf.pdf with your URL.
Later edit :
Here is a working jsfiddle as you need to display a base64String as a pdf. https://jsfiddle.net/5re04tg4/
Basically you need:
<object data="data:application/pdf;base64,{yourBase64String}" >
Or:
<iframe src="data:application/pdf;base64, {yourBase64String}" >
depending on how you want to display it.
Later later edit:
Here is a jsfiddle that's showing a Cross-Origin Request Blocked: https://jsfiddle.net/kox9pksd/ .
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://firebasestorage.googleapis.com/v0/b/bitcoin-info-44838.appspot.com/o/Web%2BDeveloper%2BInterview%2BQuestions%2BAnd%2BAnswers.txt?alt=media&token=ede150a4-d710-447d-bc09-20153cbf2587 . (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Later later later edit:
If you're using an inline base 64 PDF or if you have the computed string, you are able to render it or to open it in a new window. Working jsfiddle: https://jsfiddle.net/asbbsnb9/ .
So the problem is either related to size (you can encounter some latency till it gets rendered), to not being able to download the PDF data (as listed above) or to the PDF being malformed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.