embed pdf in page but need html to be on the page also

accend · May 21, 2014

The first part of this project was to pull a pdf file which was stored securely on the server into the browser for a user to look at it, but not long after the client asked if I could move the pdf down a bit and put a close button in.

Didnt think anytihng of it until I tried and it wasnt so easy, as the pdf always took over the full screen and I couldnt get it to recognise a div i placed on the page.

So have tried doing it the way below, which has sort of worked but I get a not as pdf error alert.

The user clicks a link to get the page below

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>utgroup admin</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>
<body>
<div style="position:relative; width:100%; height:30px; background-color:#FF0000; margin-bottom:40px; clear:both;"></div>
<object data="spdf.php" type="application/pdf" width="100%" height="100%">
 
  <p>It appears you don't have a PDF plugin for this browser.
  No biggie... you can <a href="myfile.pdf">click here to
  download the PDF file.</a></p>
 
</object>
</body>
</html>

Inside that I placed an object to try and pull the other page through which is creating the pdf, but its not quite working, any suggestions.

session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$file="$cdocdocb";
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="$file"');
@readfile($file);
//echo "<p>$file</p>";
?>

accend · May 21, 2014

I thought something as simple as this would do it, but again the pdf takes over the entire browser window, and no sign of the html including the div that I need on the screen too.

<?php 
session_start();
require_once('../auth.php'); 

include "../config.php"; 
error_reporting(E_ALL); 
ini_set('display_errors','On'); 
if(isset($_GET['pdf'])) 
{ 
 $stock_Id=$_GET['pdf']; 
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){ 
 $cdocdocb=$s["Document"];
} 
}

$file="$cdocdocb";
header('Content-type: application/pdf'); 
header('Content-Disposition: inline; filename="$file"'); 
//@readfile($file); 
//echo "<p>$file</p>"; 
?>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>utgroup admin</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />

</head>
<body>

<div style="position:relative; width:100%; height:30px; background-color:#FF0000; margin-bottom:40px; clear:both;"></div>

<object data="<?php echo @readfile($file);?>" type="application/pdf" width="100%" height="100%">
 
  <p>It appears you don't have a PDF plugin for this browser.
  No biggie... you can <a href="myfile.pdf">click here to
  download the PDF file.</a></p>
  
</object>

</body>
</html>

Psycho · May 21, 2014

You could try loading the PDF in a frame. Although I despise frames.

bsmither · May 21, 2014

You could try the Flash Player approach. The PDF will need to be converted to a Flash-compatible file.

accend · May 21, 2014

Ok will give both a try and see, its a strange one.

With the flash approach, do you mean having to change the pdf into a swf before uploading it to the server, or is there a way of converting on the fly so to speak.

bsmither · May 22, 2014

I found references to the task by Googling:

display pdf in flash player

accend · May 22, 2014

Na nothing on any of these, and the flash one is a non starter as the guy who will be uploading these just isnt going to be able to do that everytime before uploading.

Cant believe there no way of doing this...

cyberRobot · May 22, 2014

Have you considered using a third-party solution like FlexPaper?

http://flexpaper.devaldi.com/

The PDF could be uploaded there and embedded on a page that has a close button.

ginerjm · May 22, 2014

How about using google? I found this in about 2 minutes.

some css to size the div that will hold the pdf image

 #pdf
 {
  width: 50%;
  height: 300px;
  margin: 2em auto;
  border: 2px solid red;
 }
 #pdf p
 {
    padding: 1em;
 }
 #pdf object
 {
    display: block;
    border: solid 1px yellow;
 }

Here is the html that displays the pdf image

 <center>
 <form method='POST'>
 Click here to close this to back
 <input type='submit' name='btn' value='Return'>
 </form>
</center>
 <br><br> 
<!--  begin DIV to hold the PDF -->
 <!--  begin DIV to hold the PDF -->
 <!--  begin DIV to hold the PDF -->
 <div id="pdf"> 
<object data="firehouse_ad_hvvfa_sample1.pdf#toolbar=1&navpanes=0&scrollbar=1&page=1&view=FitH" type="application/pdf" width="100%" height="100%">
 <p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="firehouse_ad_hvvfa_sample1.pdf">click here to download the PDF file.</a></p>
 </object>
 </div>
 <!--  end DIV -->

Obviously you will have to code something to handle your 'return' or 'close' button, but this works for me.

accend · May 23, 2014

I cant believe how I'm just not getting it in honesty, but with what i have got below, the pdf still shows full screen, and no sign of any html.

I think I have tried your way and all I get when I load the page is a full screen of the pdf, for some reason i cant manage its size at all.

<?php
session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$file="$cdocdocb";
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="$file"');
//@readfile($file);
//echo "<p>$file</p>";
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>utgroup admin</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<style type="text/css">
#pdf
 {
  width: 50%;
  height: 300px;
  margin: 2em auto;
  border: 2px solid red;
 }
 #pdf p
 {
    padding: 1em;
 }
 #pdf object
 {
    display: block;
    border: solid 1px yellow;
 }
</style>
</head>
<body>
<div id="pdf">
<object data="<?php echo @readfile($file);?>" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="firehouse_ad_hvvfa_sample1.pdf">click here to download the PDF file.</a></p>
</object>
</div>
</body>
</html>

Edited May 23, 2014 by accend

ginerjm · May 23, 2014

You HAVE no html. Just the div with the pdf in it.

ps - read the pdf file into a var BEFORE you begin your html and check that it read ok. Then just place that var into the object tag.

accend · May 23, 2014

Sorry i did have html in there, just forgot to put it in the reply as below...

Apologise once again if im not doing somethng right, but it looks fine to me, and it still outputs full screen, and overrides any html on the page.

<?php
session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$file="$cdocdocb";
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="$file"');
$readPDF=@readfile($file);
//echo "<p>$file</p>";
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>utgroup admin</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<style type="text/css">
#pdf
 {
  width: 50%;
  height: 300px;
  margin: 2em auto;
  border: 2px solid red;
 }
 #pdf p
 {
    padding: 1em;
 }
 #pdf object
 {
    display: block;
    border: solid 1px yellow;
 }
</style>
</head>
<body>
<center>
 <form method='POST'>
 Click here to close this to back
 <input type='submit' name='btn' value='Return'>
 </form>
</center>
 <br><br>
<div id="pdf">
<object data="<?php echo $readPDF;?>" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="firehouse_ad_hvvfa_sample1.pdf">click here to download the PDF file.</a></p>
</object>
</div>
</body>
</html>

accend · May 23, 2014

Ok one thing I have noticed on checking is that the object is being made redundant, because whether @readfile($file) is being put into a var or being used directly in object doesnt matter, because @readfile($file) is there in the code somewhere, its reading it and not even go as far down the page as the html

ginerjm · May 23, 2014

Remove the header tags

Stop suppressing errors (@) on your commands. If there IS and error, don't you want to KNOW about it???

accend · May 23, 2014

I took this header out -

header('Content-type: application/pdf');

and it then comes back with no pdf reader, and tried the other and that has no effect on it at all.

I'm honestly stuck with it lol....

no errors though, took @ out.

how emabarrasing! ::)

Edited May 23, 2014 by accend

ginerjm · May 23, 2014

I said to remove 'tags' - so remove the other one also.

What's this about about 'no pdf reader'? You never mentioned that before. You said your pdf took over the whole page. Now you're telling me that you aren't seeing the pdf at all?

When you've made all my suggested changes (headers out; file reading prior to html coding; checking for errors when reading the file) please post your complete code again.

accend · May 23, 2014

Ok this is how it is now

<?php
session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$file="$cdocdocb";
//header('Content-type: application/pdf');
//header('Content-Disposition: inline; filename="$file"');
$readPDF=readfile($file);
//echo "<p>$file</p>";
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>utgroup admin</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<style type="text/css">
#pdf
 {
  width: 50%;
  height: 300px;
  margin: 2em auto;
  border: 2px solid red;
 }
 #pdf p
 {
    padding: 1em;
 }
 #pdf object
 {
    display: block;
    border: solid 1px yellow;
 }
</style>
</head>
<body>
<center>
 <form method='POST'>
 Click here to close this to back
 <input type='submit' name='btn' value='Return'>
 </form>
</center>
 <br><br>
<div id="pdf">
<object data="<?php echo $readPDF;?>" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="firehouse_ad_hvvfa_sample1.pdf">click here to download the PDF file.</a></p>
</object>
</div>
</body>
</html>

And what happens is that in IE its still full screen and I can see the pdf, and in mozilla the top half of the page is a load of strange code symbols, and the bottom bit is the you havent got pdf reader message.

Please dont shout at me lol...

ginerjm · May 23, 2014

I won't shout - you're doing good.

Ok - don't know why the browsers are so different for you. I have tried the code below EXACTLY as I've posted it in IE10, Safari, and Chrome - all on my PC. They all work mostly as expected. The only problem is that Chrome seems to position my pdf way off center inside the div/object area - but at least it displays it.

Here's the code. Do this as an experiment. Simply provide a pdf filename to the $filename var in my code and upload it to your site and use this as a simple test of "showing pdf and html" in a webpage. Don't worry about reading the table and getting the name for now. This is just a test. If it works for you then you can build your real logic into it.

<?php
$filename = "firehouse_ad_hvvfa_sample1.pdf";
$code=<<<heredocs
<!DOCTYPE html>
<html>
<head>
<title>pdf in a page</title>
<style type='text/css'>
#pdf
{
 position:relative;
 float:left;
 width: 300px;
 height: 300px;
 margin: 1%;
// border: 2px solid red;
}
#pdf p
{
 padding: 10px;
}
#pdf object
{
 display: block;
 border: solid 3px red;
}
</style>
</head>
<body>
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<center>
Version 5
<form method='POST'>
Click here to close this and go back
<input type='submit' name='btn' value='Return'>
</form>
</center>
<br><br>
<div id="pdf">
heredocs;
echo $code;
echo "<object data='" .$filename . "#scrollbar=1'  type='application/pdf' width='100%' height='100%'><p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href='$filename'>click here to download the PDF file.</a></p></object>";
//toolbar=1&navpanes=0&
echo "</div></body></html>";
exit();

Good luck!

accend · May 24, 2014

Hi,

The good news is that your way above works perfectly. I moved the pdf outside the private folder, and hey presto on refresh with your code the pdf appears in the window.

When I tried to integrate my code into it, as I have it, the pdf once again took over the whole page and then I replied back to you.

Is it to do with the fact that the pdf is in the private folder on the server, as they are very sensitive information.

The code below nearly works in that the pdf does try and load into the box but the initializing feedback keep showing, and the pdf doesnt load.

<?php
session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$filename = "$cdocdocb";
$code=<<<heredocs
<!DOCTYPE html>
<html>
<head>
<title>pdf in a page</title>
<style type='text/css'>
#pdf
{
 position:relative;
 float:left;
 width: 300px;
 height: 300px;
 margin: 1%;
// border: 2px solid red;
}
#pdf p
{
 padding: 10px;
}
#pdf object
{
 display: block;
 border: solid 3px red;
}
</style>
</head>
<body>
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<center>
Version 5
<form method='POST'>
Click here to close this and go back
<input type='submit' name='btn' value='Return'>
</form>
</center>
<br><br>
<div id="pdf">
heredocs;
echo $code;
echo "<object data='" .$filename . "#scrollbar=1'  type='application/pdf' width='100%' height='100%'><p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href='$filename'>click here to download the PDF file.</a></p></object>";
//toolbar=1&navpanes=0&
echo "</div></body></html>";
exit();

But once i then add in the $filename=readfile($file); the pdf loads but its full screen.

<?php
session_start();
require_once('../auth.php');
include "../config.php";
error_reporting(E_ALL);
ini_set('display_errors','On');
if(isset($_GET['pdf']))
{
 $stock_Id=$_GET['pdf'];
 $a=mysql_query("select Document from Documents where ID=$stock_Id") or die (mysql_error());
 while($s=mysql_fetch_assoc($a)){
 $cdocdocb=$s["Document"];
}
}
$file = "$cdocdocb";
$filename=readfile($file);
$code=<<<heredocs
<!DOCTYPE html>
<html>
<head>
<title>pdf in a page</title>
<style type='text/css'>
#pdf
{
 position:relative;
 float:left;
 width: 300px;
 height: 300px;
 margin: 1%;
// border: 2px solid red;
}
#pdf p
{
 padding: 10px;
}
#pdf object
{
 display: block;
 border: solid 3px red;
}
</style>
</head>
<body>
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<!--  begin DIV to hold the PDF -->
<center>
Version 5
<form method='POST'>
Click here to close this and go back
<input type='submit' name='btn' value='Return'>
</form>
</center>
<br><br>
<div id="pdf">
heredocs;
echo $code;
echo "<object data='" .$filename . "#scrollbar=1'  type='application/pdf' width='100%' height='100%'><p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href='$filename'>click here to download the PDF file.</a></p></object>";
//toolbar=1&navpanes=0&
echo "</div></body></html>";
exit();

ginerjm · May 24, 2014

Try using the file_get_contents function instead of the readfile one.

accend · May 24, 2014

Hi,

Thought we had it then...

All good except that the pdf inside the div comes out all in code.

Then I put the headers back to compliment it, and it took over the screen again.

On thing about out of this that is making me happy, is that it wasnt that i was being lazy and not trying ot look for the answer, its so strange that it just wont work.

Thanks though for replying, its great that you are helping.

ginerjm · May 25, 2014

Maybe someone else with some more knowledge of making browsers handle pdfs will chime in.

accend · May 25, 2014

Hi ginerjm,

thanks for the help mate, its a very strange thing where something that seems so easy to sort out, just isnt.

I think its got something to do with the pdf's being stored in the cgi-bin folder, and not just on the root level.

accend · May 26, 2014

The trouble is I just cant put these pdf's on the root level, they are very sensitive and must be kept in the cgi-bin folder, so because nothing is recognised in that folder other than cgi files, the pdf's need to be re-created I suppose into pdf's for them to be displayed, so that is the problem there, its just for some reason the pdf then has to display full width and height, and over runs the html on the page.

ginerjm · May 26, 2014

I do not believe that is the problem. A folder is a folder - nothing more. No magic about 'cgi-bin'. To prove that you could create another folder (outside of your web tree) and you will get the same results probably. I don't know why the sample I gave you works for me (with 3 diff browsers) and not you. It's something to do with your browser or something you are doing to the sample I gave you.

Sign In

embed pdf in page but need html to be on the page also

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information