Is there any way i can load PDF file (its contents) in a div or iFrame?
I have a bunch of PDF files on a server and, ideally, i need to have a button 'Show file' on a page, clicking on which will load the contents of selected file in a div(iFrame).
You can also use google pdf view by using iframe on your page :
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Instead of this in above code :
http://infolab.stanford.edu/pub/papers/google.pdf
Use your own PDF file path.
You can view the demo here.
http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html
It's just a suggestion. No downvotes please.
Google's gview is sometimes unresponsive and given 204 status. Here is the best free alternative.
https://stackoverflow.com/a/66548544/2078462
Related
Community,
I would like to run a script when you click a link, but this shouldn't open in a new frame, that's why I added the following:
<iframe style="display:none;" name="target"></iframe>
<a href="script.php" target="target">
The script now executes without popping a blank page, joy. But I want the same link to open a PDF file.
<a href="pdf/cesar.pdf" target="_blank" > click here to download </a>
But now the PDF doesn't show, as the target frame is hidden. I can't seem to combine these two. Can someone help me out on this?
Cheers!
Cesar.
It sounds like you might be over-engineering this. Consider the high-level requirements:
The link needs to:
Execute PHP code
Open a PDF file
This sounds like two actions, but from the perspective of the client it's really only one action... open the PDF file. The rest is up to server-side code.
So create one link to perform that one action:
click here to download
As long as getPDF.php returns a PDF file, the client will never know the difference. What that PHP code does before returning that file is up to you. You can have all the code you want in that file, as long as the resulting response is returning the PDF file back to the client.
With the display none it will never show up, you probably should use jQuery, I'd added an ID to the "a"
<iframe style="display:none;" name="target"></iframe>
<a href="script.php" id="openPdf" target="target">
and when click:
$(document).on("click","#openPDF",function(){
$("iframe").css("display","block");
});
I have pdf link file coming from cloud server and i put it into iframe to show it but when i open the page, it direct to download this pdf file and didn't show the file itself, also i used embed and object and it doesn't appear anything.
<iframe src='{$finalurl}' width='1000' height='1000' align='center'></iframe>
Are you required to use an i-frame?
And do you just want to show it, or download it to your 'own' server and show it? That's a big difference.
If you just want to show it (and keep it where it is):
<embed src="http://cloudservice/yourpdf.pdf" width="1000" height="1000" type='application/pdf'>
Good luck
I need to display doc or docx or pdf kind of file in php code.Here is my code,
<iframe src="http://localhost/sample/sampl1/resource/upload/resumes/1406263145_resume sample.docx"
style="width:820px; height:700px;" frameborder="0"></iframe>
in localhost...
When i load the form,the given docx file is downloading automatically and the file is not view in a php form...So any one can help me?
To view document files (doc, docx, etc), you can use either the Zoho Viewer or Google Docs Viewer jQuery plugin.
So what I want to do is create a subdomain on my website and have it load an external website into it without actually going to that website. For instance:
google.mydomain.com loads google.com but the URL bar reads google.mydomain.com.
How do I go about doing this?
I tried this but could not figure it out.
Trying:
iframe
I want page to take up the whole screen for each person's computer. Can I set it to 100% instead of x amount of pixels?
I want to remove scroll bars but it says not supported.
You can use either an Iframe, or file_get_contents();
Iframe:
<iframe src="http://google.com" style="width: 100%; height: 100%;">
file_get_contents():
<?php
echo file_get_contents('http://google.com');
?>
With file_get_contents(), you need to beware of the website you're fetching from using relative URL's, which will break the CSS, Images, Javascript, etc.
You are not going to be able to use php's include function, as this is not a resource residing on your server.
One option you could explore is loading everything in as the contents of an iframe: see http://www.w3schools.com/tags/tag_iframe.asp for some details about the iframe html element
iframe is now not supported in html5
it works on html5 also
Easy to add or remove
Example:
<body onload="window.location.href='https://www.google.com/'"> </body>
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.