Online web document viewer, open-source ppt, pdf, doc
Some time ago, I was searching all over the internet about how to make online document viewer. I needed online document viewer for PowerPoint presentations ( .ppt ) and for pdf documents. Also I wanted full-screen button, so my clients be able to read it on full-screen, and converter. From my experience in several days of search, there is almost no converter/viewer on the internet who will let you convert ppt,pptx,doc,pdf and more files, and then be able to view on web, or to be more clear, there are few complete convert/viewer components, but any license is more then 1000$. Also I noticed that many of them give you license for limited number of converts.
So, let’s begin what we need, and how to make it and all that to be open source!
1. Same style document viewer.
2. Presentation types: .ppt, .pptx, .odb, .otp, .sti, .pps.
3. Document types: doc, docx, pdf, xls, xlsx.
4. Full-screen button:
Since we need full-screen button, file must be .swf (flash file). U can find many converters who offer to convert documents to images, for example .doc to .jpg, but this is not good because documents full with text won’t be clear readable. That is because if u convert word document to images (800×600 px), you lose text quality.
Oh wait, I can make full screen button even my files are images? Yes you can and there are two methods possible.
1. Convert doc to 800×600 and 1024×768 pixels. Lets grab some JavaScript code and make gallery, (800×600) on-page gallery, and add full-screen button, where we will read 1024x768px images and show them on some kind of pop-up.
2. Convert to 1024×768 pixels. We make on-page gallery smaller with css image attributes (width to 800, and height to 600px) and full-screen gallery without css image attributes (original image).
Both are not good. In first method u spend CPU and HDD… since you need to convert twice. In second method people is downloading large file since then watch on-page gallery which is smaller.
Oh, wait…What if document is portrait format….what if is landscape format???
Oh, wait… I need to find some program that will be able to accept all our document and presentation file types.
Finally we decide to use .swf (flash file). We need OpenOffice, FlexPaper and SWFtools.
Whole scenario is like converting all documents to PDF, then convert PDF to SWF and finally show SWF file in our online document viewer.
OpenOffice – We are able to convert all above file types to pdf with OpenOffice. If you need document viewer only for yourself (blogs, websites), you can manually open your file in OpenOffice and export as PDF. But if you are developer and you need to give your clients an form where they will be able to upload their documents so other clients can view it, then u need batch convert via command-line.
So after you install OpenOffice, download PyODConverter to OpenOfficeFolder/program/.
Also you must start OpenOffice as service on your server. Open cmd and type
C:\Program Files\OpenOffice.org3.3\program\soffice.exe -headless -nologo -norestore -accept=socket,host=localhost,port=8100;urp;StarOffice.ServiceManager |
Command for batch convert via command-line is
C:\Program Files\OpenOffice.org3.3\program\python DocumentConverter.py c:\test1.doc c:\test2.pdf |
c:\test1.doc = location of your original file.
c:\test2.pdf = where you want to save and what kind of name. You will need this rename ability to organize your client’s documentations.
*If your file is PDF, of course you don’t need to convert, redirect to SWFtools *
SWFtools – Convert PDF to SWF. You can also batch convert via command-line.
Opn cmd and type
C:\SWFTools\pdf2swf.exe Paper.pdf -o Paper.swf -T 9 –f |
FlexPaper – FlexPaper displays documents in your favorite browser using flash.
1. Download and extract the pre-compiled version of FlexPaper. All builds are available for download here.
2. The zip file contains a sample file called “FlexPaperViewer.html” which shows you the basic parameters you need to pass to FlexPaper (SwfFile and Scale).
3. Copy the SWF you created with SWFtools to the same directory as your extracted files.
4. Upload everything to your web site and navigate to FlexPaperViewer.html in your favorite browser.
For more info , visit Wiki FlexPaper
hi, good explanation but can you elaborate little more on how to put all things on server?
Tell me what exactly you need, so i can tell you the steps..
Hi. Excellent guide. But how to install open office on a web server? Or do we need to own a server? I am going to let my client upload their document so they can view it online.
Yes you need your own server so you can install Open Office. Its almost same on Linux or Windows!
Btw how could i do this if the file shown will be the file uploaded by another user of the web page? Is it possible to just make a Flash reader that could directly read the PPT, PDF or docx file?
No, its not possible since this flash reader read “SWF” files. You must convert it. You can do this manually or hire a developer to make it automatic.
p.s maybe some other online document viewer can read “PPT, PDF or DOCX documents”, but from my experience, that will cost a lot!
How’s things?, I love your website http://perfectwebtutorials.com but when I post a comment I see a 403 error sometimes. Thought you may like to know
Sometimes? Hmmmm witch browser do you use and what version?
verry good tutorial
please i want to create my own webside just like scribd.com, can you help me to do that
how can i display landscape documents in flex paper viewer ? pls help me…
thanks in advance
same as portrait, but dont mix documents with portrait and landscape pages!
Hi,
I’ve had a look at the flexpaper website and it says it is possible to encrypt the files so they can be viewed securely – i.e. if someone views your html source and downloads the file direct it won’t be any use to them. However I can’t find any documentation on how to do this – do you have anything please?
Thanks very much
Ed Mozley
London, UK
Q: I’ve had a look at the flexpaper website and it says it is possible to encrypt the files so they can be viewed securely
A: YES
Q: i.e. if someone views your html source and downloads the file direct it won’t be any use to them
A: NO, that encryption is like, who can see your document (logged users only).
All what can user done is to download your document (as swf file), and then decompile.
I got success upto converting .swf file using your explanations. But i am unable to know how to pass a .swf file into flexpaperviewer as arg. I mean, where to do and how to do these fully i got confusion. Would you please help me by explaining or else give sample source file pls … ?
You already got SWF file and you dont know how to insert in FlexPaper?
Since FlexPaper is flash, you must insert via JavaScript.
On this demo page , they have this javascript . As you can see there is var swfFile = ‘/flexpaperviewer/document/view/swf?doc=Report.swf’;
Hi. Thanks for this valuable post.
In my website i need the clients to upload their files and then view them online. So every time a client uploads a document, I need to convert it? Isnt there an automatic way that w file is converted into pdf?
From my google research (trust me i have searched for this tons of sites and posts), there is no other option. Or to be more clear, there is OTHER OPTION BUT U NEED TO PAY A LOT FOR THOSE COMPONENTS!
Feel free to ask me anything other
Howdy very nice blog!! Guy .. Excellent .. Superb .. I’ll bookmark your site and take the feeds additionally?I’m satisfied to seek out so many helpful info right here within the post, we’d like develop more strategies on this regard, thank you for sharing. . . . . .