We are embedding a PDF document on the page using the following:
<object ng-attr-data="data:application/pdf;base64,{{doc.DocumentBase64}}"
type="application/pdf" style="width:100%;height:600px" />
{{doc.DocumentBase64}} will be replaced by a Base64 string of the PDF file contents.
The document shows up fine in Chrome and Firefox. However, in IE and Edge, it just shows a blank white area where the is supposed to be.
Anything special that we are overlooking which needs to be done for IE & Edge when using tag and data url is a base 64 string?
Related
My Blazor web application needs to display a pdf document. It works in Firefox, but not in chrome. Here is the code:
<embed src="data:application/pdf;base64,#QuoteModel.Base64EngineeringDrawing" style="overflow:auto;width:800px;height:1000px" />
The document is stored in the variable Base64EngineeringDrawing.
Here is how it looks in Firefox:
But in Chrome it is empty. The inspection shows
Replacing embed with iframe does not help.
How can this be fixed?
The correct use of iFrame is along the lines of
<iframe height="500" width="500" src="http://google.com"></iframe>
Note the separate terminator that is not the one used for <embed />
When using Iframe with embedded datauri: there can be server system and client browser limitations so first test a file under 10KB and then again ensure a test file is under 1.5MB as those can be common hurdles/blockers.
For PDFs especially as application format, every browser handling of PDF data is different depending on html construction and user settings. Hence the recommended method is provide an optional image of preview thumbnail with <a href="filename link" for download as inline viewing is down to the client preferences.
Usually my settings in Edge and other browsers is ask, what to do with incoming PDF
In Firefox on Windows an iFrame with base64 data should offer options like this
Edge may not offer user control, when its set to default PDF viewer and may display the frame instantly
If I use Palemoon or Waterfox (Firefox based) the frame is blank as I prefer for most PDF downloads and opens either inline or off line in SumatraPDF (depending on page construction)
different constructs may behave differently in recent Firefox as there was a security related change around/after version 97.
I changed the name of the .svg file for this example, but basically I have some graphs that output as .svg files and they can be seen in Chrome, Edge, and Internet Explorer, but for some reason the only way I can get .svg files to show in Firefox is if I open the .svg file in a text editor and copy the code and paste it in my html document. What am I doing wrong?
<img
src="graph.svg"
alt="graph"
height="500"
width="500" >
I have a PDF file embedded into a standard html web page.
<h3>Foo</h3>
<object id="foo" data="bigboundingbox.pdf"
type="application/pdf"
classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object>
This currently renders in Internet Explorer using the Adobe Reader plugin on windows. Firefox and Chrome appear to be using their internal PDF rendering engines.
In all 3 cases the page displays with the Foo header visible above the contents of the PDF.
When a user tries to print the page (File->print), the PDF being rendered does not display in the resulting printed document in Internet Explorer or Chrome.
Firefox appears to display correctly.
I have tried using PDFObject in order to embed this with the same result
There are other posts recommending using PDF.js etc.. however I must support IE 7 and IE 8 and PDF.js will not work at all with 7 and works with limited success with 8.
Does anyone know why this happens and if there is anything i can modify so that it will print ?
You can use fpdf for that. Have a look at fpdf here
I am working on Saving base64 string as PDF at client side using 'data:application/pdf;base64,' with JavaScript.
For Example Anchor tag for Download PDF on browser looks like this :
<a id="openPdf" rel="openPdf" href="data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9iago8PAobQogL0ltM==" download="1199_07112014_P.pdf">Download PDF</a>
(The above HTML snippet data is deleted so its not a valid pdf )
It is working fine in Chrome and Firefox but its breaking in IE10 and above.
Can anyone please suggest to find a solution on this?
Can a PDF be MIME encoded and included as part of the payload of an HTML page?
This site shows that you can include a MIME-encoded image or a CSS in an HTML page:
http://www.greywyvern.com/code/php/binary2base64/
-- but I don't know what the markup would be for an encoded PDF included in an HTML page. Thanks.
I've tried it with iframe and embed, worked in chrome, opera and safari, no ie or ff
<iframe src="data:application/pdf;base64,base64encodedpdf"></iframe>
<embed src="data:application/pdf;base64,base64encodedpdf">
http://jsfiddle.net/yLx2W/
http://jsfiddle.net/yLx2W/1/
Maybe with some tweaking you can get them to work for ff and maybe ie.