How to embed a PDF in HTML page?

Asked 6/4, 2011 at 11:43 Answered 3/2, 2016 at 12:32

Solved javascript html servlets browser-plugin

We would like to show the PDF document in an HTML page after retrieving it from the database via a servlet's doGet method.

Can anyone share some snippets on how to achieve this?

Matriculation answered 6/4, 2011 at 11:43 Comment(5)

"Show" how? Using a browser plug-in that is installed on the user's system? – Parodist 6/4, 2011 at 11:45

You just need to return the appropriate mimetype in the response header. – Hegelian 6/4, 2011 at 11:57

You will need to use the object, embed or iframe tag to do a separate http request for the content – Sinistrorse 6/4, 2011 at 11:59

@Sinistrorse - How to retrieve the content in a iframe tag? – Matriculation 6/4, 2011 at 12:3

@Hegelian - I am returning an appropriate mimetype for this doc as part of the http response – Matriculation 6/4, 2011 at 12:3

Non-html content apart from images needs to be retrieved using an object, embed or iframe tag

iframe: <iframe src="somepage.pdf"></iframe>
object/embed: <object src="somepage.pdf"><embed src="somepage.pdf"></embed></object>

somepage.pdf could be somepage.jsp?filename=somepage&mimetype=application/pdf

Here is an interesting link How to Embed Microsoft Office or PDF Documents in Web Pages

and here is a stackoverflow search

Sinistrorse answered 6/4, 2011 at 12:10 Comment(8)

I need to use inline style elements from the parent document in the child document. Iframe doesn’t allow this. Would this work with embed or object? – Hawkshaw 25/8, 2015 at 23:31

Unlikely. If cross domain it will also not work. If not, then iframe should work. Ask a separate question – Sinistrorse 26/8, 2015 at 3:44

same domain. But the question is already asked and it's answers only provide response for using external stylesheets. – Hawkshaw 26/8, 2015 at 8:53

So why can't you use iFrame? You can copy and insert the parent's stylesheets into the iframe when loading – Sinistrorse 26/8, 2015 at 9:2

In fact I don't need an iframe. This is for a single tag which is pre. The content require a special editor that I wrote myself and it's very difficult to edit it. So I thought the best was to split that part for the main document. Also the solution should not require visitors to enable JavaScript. – Hawkshaw 26/8, 2015 at 9:12

When i'm trying these, it's start downloading the docx file, is it because i'm not on a server (offline), or im' missing something? – Roxannaroxanne 6/4, 2017 at 8:45

Likely your browser is not set up to use word embedded. – Sinistrorse 6/4, 2017 at 8:50

This will work only for PDF, for any Microsoft Office format it will download the file. I even tested it on Edge, and still I didn't managed to View a .docx file. Did anyone managed to make this work?? – Cerebroside 24/12, 2019 at 16:55

Google docs viewer can handle this.

try

<html>
    <head>
        <style>
            *{margin:0;padding:0}
            html, body {height:100%;width:100%;overflow:hidden}
        </style>
        <meta charset="utf-8">
            <?php
                 $url = $_GET['url'];
             ?>
        <title><?php echo $url; ?></title>
    </head>
    <body>
        <iframe src="http://docs.google.com/viewer?url=<?=urlencode($url)?>&embedded=true"  style="position: absolute;width:100%; height: 100%;border: none;"></iframe>
    </body>
</html>

Homosexual answered 3/2, 2016 at 12:32 Comment(1)

Thanks, this is the only way that i found and working. – Roxannaroxanne 11/4, 2017 at 12:58

If you are looking for a pure HTML version of the document (for fast rendering and cross browser support), you can go through Docspad. Docspad helps embedding all the different popular document formats into your web application. http://docspad.com

Keneth answered 8/5, 2014 at 21:41 Comment(1)

Docspad is dead: "We will no longer support Docspad services effective October 19, 2014" – Taxiway 20/5, 2015 at 21:38

Recommended topics

Hot tags