Best Way to Embed PDF in HTML

Question

What is the Best Way to Embed PDF in HTML?

• iFrame?
• Object?
• Embed?

Adobe pronounces itself about it?

Supose that the PDF was generated on the fly, so it can't be uploaded to a thrid-party solution prior to flushing it

Answer 1

Scribd

Answer 2

This is actually up to client's settings how PDF is handled within webbrowser. Web developer can do very little about that. There is a header called "content-disposition: inline" that you could utilize but it will mostly not work than work.

The only solution I can recall is to serve not PDF but Flash that will display your PDF document. For example have a look at www.scribd.com. But the problem is that your documents have to be hosted on third-party server and you can't convert them on fly. If these limitations don't affect you, then iPaper is way to go.

Otherwise, there is currently no good solution. Either someone will make report viewer based on flash (I smell business opportunity for someone) or CSS will get good enough to produce professional reports based on HTML markup. Until then, we (and our users) are screwed.

Answer 3

FDView combines PDF2SWF (which itself is based on xpdf) with an swf viewer so you can convert and embed pdf documents on the fly on your server.

xpdf is not a perfect PDF converter. If you need better results then ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a flash viewer for.

But for simple PDF documents, FDView should work reasonably well.

Answer 4

To stream the file to the browser, see here: http://stackoverflow.com/questions/84995/how-to-stream-a-pdf-as-binary-to-the-browser-using-net-20 - note that, with minor variations, this should work whether you're serving up a file from the file system or dynamically generated. With that said, the referenced MSDN article takes a rather simplistic view of the world, so you may want to read here as well for some of the headers you may need to supply.

Using that approach, an iframe is probably the best way to go. Have one webform that streams the file, and then put the iframe on another page with its src attribute set to the first form.

Answer 5

I am facing a similar problem. Here is how I am tackling it.

1. Create a table structure to hold the dynamically generated PDF. Something like:

TemporaryFile TemporaryFileID UNIQUEIDENTIFIER DEFAULT NEWID() FileName varchar(120) FileData varbinary(MAX) HttpContentType varchar(120) ExpirationDate datetime

1. On Server push temporary file bytes and info into this table.

2. Create a generic ASP.NET Handler (.ashx) that accepts and ID in it's query string and writes the data using something along the lines of:

   string id = Request.QueryString["ID"] TemporaryFile temp = Repository.Load(typeof(TemporaryFile), id);

   context.Response.ContentType = temp.HttpContentType; //for pdf it's "application/pdf" context.Response.BinaryWrite(temp.FileData);

3. Will either use an embed tag or a frame for display of the PDF. For the source of the Embed tag, I will set it to the location of my handler:

src=MyHandler.ashx?ID=someguidvalue

1. Whenever I go to load up something in my handler, I clean up any expired items. Saves me from having to have some batch or scheduled job to clean up expired temporary files.

My question, however is how can I hide the toolbars using this approach. Also, how can you hide toolbars when clients have Adobe Acrobat Standard installed (not just Reader)?

Answer 6

With the standard disclaimer that it's my day job, embedit.in is like Scribd but has an API that would let you do this in an automated fashion as your PDFs are generated. That way, you don't have to deal with building a PDF viewer yourself or making sure people have the right plug-ins installed.

Answer 7

here is an example showing that a PDF can be embedded as an iframe http://www.cs.tut.fi/~jkorpela/html/iframe-pdf.html

Answer 8

If you are developing solutions using .NET then you can use this custom control to neatly embed PDF files where you exactly want them to be, http://www.beansoftware.com/ASP.NET-Tutorials/PDF-View-Custom-Control.aspx

Answer 9

Have a look for this code- To embed the PDF in HTML

<!-- Embed PDF File -->
<OBJECT src="YourFile.pdf" TYPE="application/x-pdf" TITLE="SamplePdf" 
WIDTH=200 HEIGHT=100>
    <a href="YourFile.pdf">shree</a> 
</object>

Answer 10

You can also use Google pdf viewer for this purpouse. As far as I know it's not an official Google's feature (am I wrong on this?), but it works for me very nice and smooth. You need to upload your PDF somewhere before and just use it's url.

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&amp;embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

What is important is that it doesn't need flash player, it uses JavaScript.

Answer 11

Hi,

I m using the same way to render PDF in HTML, but i m doing it in MVC like this

&folder=<%=ViewData["Folder"] %>" type="application/pdf" width="960" height="900">

and Controller/Action is

public void GetPDFData(string projID, Project_Thin.Folders folder) { Highmark.BLL.Models.Project proj = GetProject(projID); List ff = proj.GetFiles(folder, false); if (ff != null && ff.Count > 0 && ff.Where(p => p.FileExtension == "pdf").Count() > 0) { ff = ff.Where(p => p.FileExtension == "pdf").ToList();

            Response.ClearHeaders();
            Highmark.BLL.PDF.JDLCustomerPDF pdfObj = new JDLCustomerPDF(ff, proj.SimpleDbID);
            byte[] bArr = pdfObj.GetPDF(Response.OutputStream);
            pdfObj = null;

            Response.ContentType = "application/" + System.IO.Path.GetExtension("TakeOffPlans").Replace(".", "");
            Response.AddHeader("Content-disposition", "attachment; filename=\"TakeOffPlans\"");
            Response.BinaryWrite(bArr);
            Response.Flush();
        }
    }

the problem is, as i m dowloading data first from server and then return the byte data, it is taking some time in downloading, so i want to show some kind of progress to show processing.

Please help me on this

Answer 12

I would say the open source lib FlexPaper is the best option by far. You stay in control over your documents and actually works a lot better than scribd...

http://flexpaper.devaldi.com