I currently use a PDF-to-Flash to allow for users to flip thru pages of uploaded PDFs. However, with so many using iPhones/iPads I would like to switch this to a solution which works with any browser.
The site is developed in Ruby on Rails and I have looked into using pdf-toolkit and rmagick to convert the PDFs to images but it's not enough since I want the pages to scale with the browser window - SVG is not an option since I need for it to work w/ IE6 ;)
Any ideas?
Thx,
G
Why don't you use http://docs.google.com/viewer ?
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
It's really simple, and it isn't Flash (can serve iPhone users too :D). Just add this to the view:
<iframe src="http://docs.google.com/viewer?url=#{YOUR_PDF_URL}&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
Another option is a digital publishing platform like the one from Zmags. It converts a PDF to Flash, but when viewed on mobile devices it transforms into a swipeable version. Loads fast too.
Related
I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8.
<div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in
installed. In this case IE (it doesn't matter which version) doesn't
know how to render it and it'll simply download file (Chrome, for
example, has its own embedded PDF renderer).
That said. is not best way to display a PDF (do not forget
compatibility with mobile browsers, for example Safari). Some browsers
will always open that file inside an external application (or in
another browser window). Best and most compatible way I found is a
little bit tricky but works on all browsers I tried (even pretty
outdated):
Keep your but do not display a PDF inside it, it'll be filled
with an HTML page that consists of an tag. Create an HTML
wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the
browser. Also take a look to this post if you need to support Safari
on mobile devices.
1st. Why nesting inside ? You'll find answer here on
SO. Instead of nested tag you may even provide a custom
message for your users (or a built-in viewer, see next paragraph).
2nd. Why an HTML page? So you can provide a fallback if PDF viewer
isn't supported. Internal viewer, plain HTML error messages/options
and so on...
It's tricky to check PDF support so you may provide an alternate
viewer for your customers, take a look to PDF.JS project, it's pretty
good but rendering quality - for desktop browsers - isn't as good as a
native PDF renderer (I didn't see any difference in mobile browsers
because of screen size, I suppose).
See also: HTML embedded PDF iframe
I have looked around the web and have found that appending #page=?? to the end of a PDF link will automatically take the visitor to that specific page in the PDF file.
I was wondering if this is still best practice as it doesn't seem to be working for me (Chrome on Windows 7). Also, all the articles I have found so far date back to 2006-2008, have things changed recently?
This is still valid code but it may require that some version of Acrobat (Reader, Pro, etc) be installed as a plugin on the browser in order for it to work as expected. Since multiple commonly-used browsers now have a built-in reader (Chrome, Safari for iOS are the big two that come to mind) support for direct page linking is somewhat spotty now. You can still do it...the worst case scenario is that the PDF just opens to the first page for those users but I would advise to just leave off the direct page link. If the page is that important, extract it to a separate PDF and link to that.
In rails is there anything available that if a user uploads a document to me through paperclip (like maybe a .doc or .pdf or .odf, etc.) That i can embed there document into my page (Like perhaps is there some sort of gem available to handle that
I found a solution to the pdf part of my problem.
theres a simple html line that solves this
<iframe src="thispdf.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
I've tried the same with .odt, but this just downloads the file (maybe this was more of an html problem than rails) -- note i only tested this in chrome
By embed do you mean display? There's no native way to display any of those documents in html, so you will have to either somehow convert them to html or use another layer, like flash or a third-party tool, to do the embedding for you.
Maybe one of the embed.ly providers can give a nice display for your documents.
I used the following code to make mine work in the view (with the example object #person) using the most current (as of 2013) Google Docs embedded pdf code specifications:
<iframe src="https://docs.google.com/viewer?url=http://www.mysite.com/<%= #person.pdf.url %>&embedded=true"
width="100%" height="800" frameborder="0" >
<p>Your browser does not support iframes.</p>
</iframe>
i have tinymce embedded in my website, so if users want to edit content, then can click on an "EDIT" link and it brings up the content in tinymce editor. when they click "Save", i save the html to a database. this works perfect and avoids them calling me when they need content changes as they can go in directly and next time they reload the main page, it loads up their changed content.
they now want to be able to add their own images. I see there is some image support in tinymce as seen here, but in my case, the images would be on their computer.
So i am looking for some advice on how to handle image support using tinymce on my asp.net mvc website similar to how stackoverflow allows you to upload and include an image in your question all in one step
any suggestions?
I guess you need to take a look here:
Best TinyMce editor Image Manager / File upload for Asp.net Mvc
it has a list of tinyMCE file browsers/uploaders/managers which work with MVC :)
I had a similar issue and solved it by;
Allowing the user to upload images which i then stored in the file system.
Once the image was saved then you could use tinyMCE to link to it.
It's a round-about way of doing it but it worked. If your images are stored on a users computer then you're going to need to implement something like this me thinks as you can't assume you can link to the image and if you can you can't be sure the computer will be on.
Maybe you can give this TinyMCE-plugin a try (the official Moxiecode plugins are quite expensive):
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
I haven't tested it yet, but it's a free add on that allows uploading and selecting files.
HTML 5 supports embedded images. You can embed image in html code as a base64 string.
Example Code:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQYmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>
There is a opensource TinyMCE plugin available in github:
https://github.com/buddyexpress/bdesk_photo
I want to have a web page coded with HTML5, and I want to be able to put a pdf file onto this page so you can view it without having to click on any links to download it separately. Anyone know how to do this?
I want it to keep the text, images, and layout of the pdf file also. If that weren't the case I would just use an image. Thanks!
Edit: This will be hopefully going onto the ipad. So it won't support adobe. I need to just find a way to somehow make the pdf file show up in an html5 page without using a viewer. I want to keep all of its layers. It doesn't have to stay a pdf file when its on the page, I just need to find a way to transfer all of those layers there without having to do this manually with divs for each image, paragraph, etc.
I don't think this is possible without using Flash. Instead, you might want to convert the PDF to a different format (HTML for example) that can be rendered by the browser. There are tools that can do this from the command line, so making a script to do it on your site won't be too difficult.
You can use the embed tag like this:
<embed src="/path/to/your/file.pdf" />
Maybe you could convert the pdf to images on the server and display the images instead of the original pdf. As far as i know, Apache pdfbox can be used to do such a convert.
A little bit late and maybe issuu is gonna fix it soon but for now you can embed with issuu.com using an iframe and your magazine address ending in ?mode=mobile. Tested in ipad:
<iframe width="850px" height="580px" src="http://www.issuu.com/your_username/docs/your_magazine_name?mode=mobile" frameborder="0" allowfullscreen></iframe>
I would like same mobile version loading in desktop so there is no advertising. If you know how to make the browser to think it's an ipad let me know.
This code would directly embed a pdf viewer in a webpage
<object data="path to pdf " type="application/pdf" width="100" height="100">
<p>Alternative text - include a link to the PDF!</p>
</object>
If you are using ASP.NET, this link may be of interest to you.
Browser Based PDF Viewing And Editing
Hosted entirely on your server,
activePDF Portal is an ASP.NET
WebControl that enables your users to
interactively view and modify PDF
documents from any source - adding
comments, form fields, bookmarks, and
more – directly from within a standard
web browser, without requiring any
client-side software such as Adobe
Reader or Flash, or the use of ActiveX
controls.
- http://portal.activepdf.com/
PDFObject looks promising, but it doesn't work on iPads at the moment.