On a click event, I want to render a PDF inside an element, and I'm appending it in an object tag.
As a fallback for older browsers, I'd like to make the PDF to download automatically.
Here's what I'm working with
<div class="selected">
<object data="loader-resources/doc.pdf" type="application/pdf" class="loaded" width="100%" height="100%">
<p class="error">Your browser cannot display pdf within a website.</p>
</object>
</div>
I can't do this server-side, via Content Disposition in my HttpResponse header as it directs here, because I want the PDF to render on-page if the user's browser supports it.
Any ideas?
Old browser, what else work better than simple
download
Then setup another route on the server for fallback.
For not that old browser you may able to download the pdf as string and do(break in IE 9 & below):
<a href='data:application/pdf;content-disposition:attachment;filename=doc.pdf,' + pdfstring</a>
Related
Im trying to view a pdf file using html. But whenever i try to open it, the browser download the file instead of viewing it.. I dont know whats wrong. I tried embed and iframe and both results the same thing. It downloads the file.
Thing is when i see other websites, it works. so i know for sure its not because extension problems. checked the pdf viewer extension and its on.
Here is my code. how is this happening??
<div class="row">
<div class="col-sm">
<p><span class="fw-bold">DOKUMEN : </span></p>
<iframe src="http://127.0.0.1:8000/docs/testpdf.pdf" width="100%" height="100%" style="border: none;"></iframe>
<embed src="http://127.0.0.1:8000/docs/testpdf.pdf" type="application/pdf" width="100%" height="600px" />
</div>
</div>
Some browsers like IE dosent have the proper plug-in to render embedded PDF. You better work with browsers like firefox or chrome. Here is a page that answered your question before.
downloading PDF embedded file instead of viewing it
i have a php page which shows a list of invoices. clicking on any of those invoices shows its pdf file. When the user clicks on any invoice, the src of the embed tag is changed by jQuery to the appropriate pdf file.
Works very well, but strangely enough it behaves differently in safari then in firefox for instance.
In firefox i can just click on an invoice -> the pdf shows. if i right after that click on another invoice and after that click on the first invoice again -> the pdf shows again.
Safari: If i re-click an invoice, i get a blank pdf (embed tag). And downloading of that pdf results in a 0kb file.
Seems to only happen in safari.
Has anyone encountered this before and maybe know a solution to this issue?
i have googled and tried a lot but it's still not working.
Html:
<div class="card-body">
<embed id="invoice_scan" src="" type="application/pdf" width="100%" height="400px" />
</div>
jQuery:
$('#invoice_scan').attr('src', '/docs/pdf_file1.pdf );
I had this issue showing a pdf in an object tag using angular.
The fix was to remove type="application/pdf" from the object tag.
I have a similar issue with Safari 15.5 with <object> tag. As soon as PDF gets loaded, it was crashing the browser. I removed type="application\pdf" conditionally for safari. That seems to be working.
Alternate option would be use iFrame for PDF's.
Why is this code failing on MacOS Big Sur Safari?
My embed element is able to show pdf preview in chrome but not in safari. Can anyone advise on how I can render the embed PDF Preview element on safari?
I have tried some of the methods but none worked.
Recommended way to embed PDF in HTML?
Thank you!
<embed src="" type="application/pdf">
In many mobile browsers, PDFs are not able to be rendered using standard embeds, instead, you might want to turn to a library such as pdf.js by Mozilla. This library renders pdfs independently of the built-in PDF viewer, so it doesn't have the same restrictions as embeds.
I use Pdf.js, I get base64 file from web service (this.attachmentSource), and when I want to add var iframe = "<iframe width=800 height=550 src='" + this.attachmentSource + "' > </iframe>",For some pdfs in google chrome I get iframe empty, but in Mozila everything work fine, who can explain this mystery?
I tracked down the issue
The iframe is being block by chrome detecting insecure content and blocking the iframe from loading. this only occurs when using Chrome, IE Firefox, Safari on PC work fine.
Safari and Chrome also work fine on the iPad. It appears Chrome on PC has a different set of rules and blocks the content. Selecting the shield in the URL title bar allows the content to be displayed. Pressing Ctrl shift J gives some information about what content is being blocked.
wouldn't it be nice if all the browser followed the one set of rules
I happened to notice: server Response Header:
x-frame-options: DENY
The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used.
I was using AWS CloudFront with a Lambda#Edge function already, so I found a solution here: Configuring X-Frame-Options Response Header on AWS CloudFront and S3
If you are using a different server stack, you will have to adjust your server response headers accordingly.
iFrame doesn't support most of the things. For ex: if you have graphs in your application it won't be displayed.Use embed or object instead.
<object data="{{srcUrlTrusted}}" width="100%" height="800">
<embed ng-src="{{srcUrlTrusted}}" width="100%" height="800"> </embed>
</object>
I was having the same issue when trying to embed a PDF. I tried both an <iframe> and <embed> approach, but they still wouldn't open in Chrome.
The solution for me was opening the PDF in Adobe Acrobat and under the "Protect" tab, select "Remove Hidden Information".
I didn't create this PDF, so I am not sure which policy, etc was causing the issue.
Hope this helps!
I'm working on a project which needs to open a PDF from a local path in a dialog box. I am able to open the PDF from a normal chrome browser but I am not able to open the same PDF from chrome mobile version view(inspect element-console). I have seen so many links suggested to open from google drive, but it cannot open the PDF if the internet connection is not available. How can I achieve this without google drive process. Please help me out from this problem, thanks in advance. The code which I written so far.
Note: I am restricted from using jQuery in this project, only JavaScript is allowed.
function pdf(objFRM, local_src){
document.getElementById('dialog').style.display = 'block';
document.getElementById(objFRM).style.display = 'block';
document.getElementById(objFRM).src = local_src;
console.log(document.getElementById(objFRM).src);
}
<a onclick="pdf('iFrame', 'assets/pdf/sample.pdf')"><button class="gray-button">Manual</button></a>
<div id="dialog" style="display:none;">
<div class="modals">
<iframe id="iFrame" type="application/pdf"></iframe>
</div>
</div>
I have heard about an issue with Chrome where PDFs won't display/render, but work just fine in other browsers. Try using a different browser to make sure the issue isn't with Chrome itself.
If this is a local website,
assets/pdf/sample.pdf
would only work if your code files are in the folder with assets.
Afaik there is no built in PDF-Viewer in the mobile version of chrome. So you need to install a separate PDF-Viewer App to display PDFs. What you could do is offer the mobile users a link, where they could "download" the file to open it in an external viewer:
<a id='myPDF'>Get Me</a>
document.getElementById(objFRM).href = local_src;
Usage of 'iframe' is discouraged these days for security reasons. Although for resources, in the same origin it won't be a problem. But I would suggest using embed or link tag for it. To open/pop-up a pdf, you can also use target attribute from 'anchor' tag.
<object name="frame_1" data="/assets/template/test_pdf.pdf" type="text/pdf" width="600" height="500">
<embed src="/assets/template/test_pdf.pdf" id="embed_pdf"></embed>
</object>
<link rel="import" name="frame_2" href="/assets/template/test_pdf.pdf">
<a target="frame_1" href="assets/template/test_pdf2.pdf" class="btn btn-raised btn-info">Load PDF</a>
<a target="frame_2" href="assets/template/test_pdf3.pdf" class="btn btn-raised btn-info">Load PDF</a>