4

Is there is PDF viewer which I can embed into my HTML and which I can style as I want.

Actually I need to show some page of PDF file and customize my own UI (few buttons to turn over the pages and commenting).

And if there is any Ruby solution (It's not actually about programming, as I understand) it will be great.

I want to show pdf because:

  • User can copy text
  • Text is in original layout

So I don't want to show it as images or as a converted text. But I want to show page in simple design. Without Flex or whatever.

fl00r
  • 82,987
  • 33
  • 217
  • 237
  • Pretty much perfect duplicate of http://stackoverflow.com/questions/1900423/what-is-a-good-pdf-to-html-converter-for-ruby-on-rails – peteorpeter Apr 07 '11 at 21:24
  • It's not about converting PDF to HTML, but about embeding PDF into HTML page – fl00r Apr 07 '11 at 21:24
  • @peteorpeter, and by the way that link is in my favorites :) – fl00r Apr 07 '11 at 21:25
  • Ahh, I see the distinction in your question now. That said, per @Marc B's answer, you can't control a *browser* plugin. I think you'll need to convert the PDF to a web-standard format (HTML/CSS, Canvas/SVG) on the backend - in essence making the plug-in server-side. – peteorpeter Apr 07 '11 at 21:31
  • I can't convert properly to HTML – fl00r Apr 07 '11 at 21:33
  • (BTW, I tried to change my earlier comment to "Related question..." but missed the 5 min editing window. Sorry...) – peteorpeter Apr 07 '11 at 21:38

7 Answers7

15

Yes, it is possible, with HTML5!

https://github.com/mozilla/pdf.js/

This is a pure-javascript library that uses HTML5 functions to open a PDF file and render it in the page. I successfully test the library in following browsers:

  • IE9 and current version of Google Chrome, Firefox, Safari
  • IE8 and lower do not support pdf.js (lacking HTML5 functions)

Usage

Include the javascript libraries in the HTML file and add an -element ( is HTML5 element, so it will work only in HTML5 browsers):

<body>
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>

Use a javascript call similar to this to render the PDF inside this canvas:

PDFJS.getDocument('your-file-goes-here.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});
Philipp
  • 10,240
  • 8
  • 59
  • 71
4

Other than a few browsers that have PDF viewers built in (Chrome comes to mind), PDF display is handled by external plugins, over which you have no control. You can't embed a PDF into a page, other than via iframes, and even then it's a completely external app from the browser, and not subject to css styling rules.

I don't see what Ruby has to do with this, as that'd be a server-side operation, and you're talking about client-side preparing. You could use Ruby (or most any other language) to extract the PDF's text, but you explicitly say you don't want to do that.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • Yep, I meant Ruby in position as a ready plugin for Rails or whatever. So what plugins can you recommend? And maybe there is a way to get some open source plugin and extend it by myself? – fl00r Apr 07 '11 at 19:52
  • Hmmm... Are you suggesting you would write your own _browser_ PDF rendering plugin? – peteorpeter Apr 07 '11 at 21:41
  • if you're going the custom plugin in route, you've pretty much shot yourself in the foot. Any site that says "please install this random program so you can view our fantastic" content is pretty much an immediate "I'm outta here" by the rest of the web. Especially when it's just to view some PDFs. – Marc B Apr 07 '11 at 21:44
  • “ You can't embed a PDF into a page, other than via iframes” — how about http://blogs.adobe.com/pdfdevjunkie/2007/08/using_the_html_embed_tag_to_di.html? (Which I haven’t tried myself.) – Paul D. Waite May 17 '11 at 15:56
  • @Paul: Still requires the browser either directly support PDF rendering or an external plugin like Acrobat. You can `` a zip file, but that doesn't mean it'll display properly. – Marc B May 17 '11 at 15:58
  • @Marc: ah sure, I did wonder whether this required Acrobat, or even something worse. – Paul D. Waite May 17 '11 at 16:17
3

The closest thing to what you're asking would be Google Doc Viewer. It at least doesn't require anything more than JavaScript.

Chuck
  • 234,037
  • 30
  • 302
  • 389
2

You could alternatively convert the PDF into HTML5 and display those pages using the PDF2HTML5 product by IDRSolutions. The output can be placed inside your own CMS and you can add your own GUI or you could use the existing options. You can have a look at potential output on the free converter and trial it if you like, it's a 100% Java library though which may or may not be a problem.

Note: For the sake of transparency it's worth mentioning I am currently a developer on said product so am very familiar with it's capabilities.

It's also worth noting pdf.js doesn't always perfectly match the actual pdf but it is very difficult to get an exact match and still preserve some of the key features you want. However it does do quite a good job most of the time.

Lyndon Armitage
  • 417
  • 4
  • 11
  • Another thing to note is that pdf.js won't get indexed by search engines like Google, and the outbound links won't be indexed unlike this converter. – Lyndon Armitage Feb 01 '13 at 12:06
1

The only thing that I know of that would help you do that is Adobe Flashpaper (there could be open source alternatives? Not sure).

Examples here:

Jakub
  • 20,418
  • 8
  • 65
  • 92
  • I was using `flashpaper` when I was in a children garden! It is still alive :). I thought there is something more modern in Flash country – fl00r Apr 07 '11 at 20:02
  • Not that I am aware, I have seen numerous implementations of flash paper tho around. Like I said as far as 'inline' stuff this is the process unless you move away from pdf type documents. – Jakub Apr 07 '11 at 20:07
1
  • Considering compatibility, the best is to use a genuine adobe software for rendering pdf. Third party renderers work most of the times, but occasionally have trouble with some aspect of formatting. You can just download pdf reader from the adobe website, do a simple setting on the web browser, and let the browser open a pdf file using the genuine pdf renderer. At least on Firefox, you can do that.

  • If you want to progmatically display a pdf file without using a web browser, that means you need a GUI toolkit that works with a pdf renderer. All I know is poppler on ruby/gnome2. I once was able to use it with ruby 1.8, but since I have moved to ruby 1.9, I have not tried it. Other standard GUI toolkits for ruby are wxruby, fxruby, ruby/qt, shoes etc., but I am not sure which of them has a pdf renderer.

Sorry if not helpful.

Nanne
  • 64,065
  • 16
  • 119
  • 163
sawa
  • 165,429
  • 45
  • 277
  • 381
0

No need for external libraries. Much browsers support already multiple ways to vies the pdfs. Like object, iframe, embed. You can use an object, with an iframe fallback, which in return fallbacks on a download:

<object data="/pdf/sample-3pp.pdf#page=2" type="application/pdf" height="100%" width="100%">
<iframe src="/pdf/sample-3pp.pdf#page=2" style="border: none;" height="100%" width="100%">
This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>
</iframe>
</object>

Source

Hielke Walinga
  • 2,677
  • 1
  • 17
  • 30