How do I implement PDF/ PPT viewing facilty in my website? - javascript

Are there any open source/free tools using which I can implement ppt/ pdf viewing facility in my website ?
The documents are stored on my own database server & external links as well.

Search for "online pdf editor" and several companies will show up. Some of them sell PDF libraries to do what you want.
A roll-it-yourself solution would be to start with Ghostscript for PDFs, and Office for PPTs, and use them to emit jpg or png files.

Related

Open Files in Browser instead of downloading (including files like .doc, .xls etc)

I am using Java Rest APIs to upload files in my project. Based on the configuration my files either goes into s3 bucket, google drive, one drive or even in local file system (in the same machine where my application is running). During download again I am making an ajax call which returns the file in response with Content Disposition header attachment; and browser downloads the file irrespective of its format. I want an option to view these files in the browser instead of downloading it directly. How can I do that ? (Especially formats like doc,xls etc)
As far as I know, there are no client-side libraries exist that can open .doc, .docs, .xls in browser. There is a way to render render your files using browser is to use Google Documents' Viewer or Microsoft Office 365 viewer via an <iframe>. Using this inside an <iframe> you can open your file in side your browser but can not edit.
Google Documents' Viewer inside <iframe>
<iframe src="http://docs.google.com/gview?url=http://example.com/path/to/your/document.doc&embedded=true"></iframe>
Google Documents' Viewer clickable link <a>
Open your doc file
Microsoft Office 365 viewer <iframe>
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/path/to/your/document.doc' width='1366px' height='623px' frameborder='0'></iframe>
Browsers don't have any built-in way to view Word docs so unless the user has configured their browser to open it with some plugin (which 99% of the world hasn't done), the browser will prompt them to download the file.
However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an to display a remotely hosted .doc/.docx.
<iframe src="http://docs.google.com/gview?url=http://url-of-the-file&embedded=true"></iframe>
you can generate temporary URL for your s3 documents by keeping them private.
if you are interested in giving users privilege to edit them online then you can go with any tool like onlyoffice

Displaying documents with ability to edit online

I'm using Node-ViewerJs to display documents of different formats in my nodejs based web app. But besides pdf, ViewerJs only supports Open Document Format.
Is there any other good solution for displaying documents of different formats (i.e. doc, docx, xls, xlsx) preferably with ability to do online editing to the document by web viewers?
PS: I'm looking for some completely self-hosted or offline (in other words) solution rather than cloud based solutions.
Try uploading your documents to google drive you can also do it via it's api's.
Then generate an embedded link of it, by following steps: (After importing in google docs)
File > Publish to the Web..;
Check the box that says “Automatically republish when changes are made”;
Click "Start Publishing";
Change “Get a link to the published data” from “Web page” to “HTML to embed in a page”;
Copy and paste the HTML code generated into your HTML webpage. it's basically an iframe so it will embed the google docs view in your webpage.

View Microsoft Office files in the browser

I have been wondering for a while if there is a way to view (lets's say a *.pptx) file in a browser. Imagine Dropbox's feature. I'm making a Content Sharing System and it would be wonderful if a user could see his *.docx or *.pptx or whatever microsoft office file. I found this but it is paid.
Try out OneDrive.com or OneDrive for Business within Office 365. There you can view and edit files online. You can also use SharePoint to display files online.
If you want to embed the doc in your own website, try this Project on github, https://github.com/officedev/pnp-wopi.
HTH-Oliver

Is there any way to display pdf files in browser such that the viewer can only read the file and can't save/download/print the file in any form

I have to integrate pdf files in my PHP web application such that the viewer of the file can not save/download/print the pdf file.
I am finding a way of doing this in any way like using javascript, jquery or straight in PHP or any other way if any.
I think you'd need a custom PDF viewer in your app, like what Google Drive does with images and documents.
I'm not aware of any functionality that allows an app to tell Chrome/Firefox or the registered PDF handler to limit user interaction like you mention.

Hope to create gmail attachment preview like functionality using angularjs

I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.

Categories

Resources