Is there some way to preview documents in browser? Specifically in say an iframe within a page, as opposed to opening the doc in a new tab? I have a list of files of any type and when a user clicks on one, want to open it in a readonly format. If that file is a video or audio file, that's easy enough, but I'd like to be able to also do pdfs, word docs, maybe excel. Preferably it would be in a cross browser friendly way but if I need to do detection for a plugin (I've seen Google Docs Viewer for FF) I can live with that.
UPDATE:
ShaneC's answer is great and will work well in general. The one hitch I see is that for html5 devices (think ipad), I need to convert the document into a series of images. Is there any way for me to do this in an automated fashion? I need to be able to do this automatically when a new document is uploaded.
You'll want to integrate a cross-browser cross-type document viewer. Google will give you some good sites, personally I've had good experiences with Flex Paper.
For demos, see here: http://flexpaper.devaldi.com/demo/
There is another approach that can be used to view images/pdf/xlsx/docx etc.
You can use iframe and google's gview in the following way:
const YOUR_URL = https://calibre-ebook.com/downloads/demos/demo.docx;
<iframe
className="doc"
src={`https://docs.google.com/gview?url=${YOUR_URL}&embedded=true`}
/>
There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.
Related
I need a javascript doc viewing engine with some text highlighting API.
Can you advise anything?
give try to WebODF it is a JavaScript library that add Open Edit Document Format (ODF) support to your website and to your mobile or desktop application. It uses HTML and CSS to display ODF documents.
and opensource also :)
http://webodf.org/
The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.
I'm trying to allow the user to view a PDF from a webpage, but disable them to download or print said PDF. I keep running into problems with flash or chromes built in PDF viewer. I've tried Iframe, normal embed, PDF security, adobeJS or w/e it's called but no luck.
Anybody have a universal suggestion on how I can get this to work?
1a. You can not send content to a user that they won't be able to print, or save... The closest you can come, would be to show the equivalent content in Flash, and then they can only print the "visible" portion in the flash viewer.
1b. If it goes over the wire, it can be captured.
What are you using to generate the PDFs? You should be able to do a "write-only" PDF, and YMMV even on that.
After 8+ hours of trying many different approaches to the problem we ended up going with a paid option of Scribd which works in all browsers and looks decent enough for us to use. That is our solution.
cssdesk, jsbin and such do a wonderful job of showing a live preview side by side with your code. I wonder if there is a way to just get the live preview.
Ideally, I would open my text editor or ide on one monitor, and a browser on another monitor, and while I adjust the code in my ide, and save my document, the browser would sense the change, and update the page.
Would this need to built as a browser extension, maybe it can be built in javascript and offered for free to any developer who would like to use it.
I feel like this would be a great feature for firebug or something.
There is LiveJS, which does exactly this:
http://livejs.com/
I am sure it's possible to be able to drag files onto a Flash movie inside a browser, but is it possible to achieve the same functionality with Javascript?
I have seen a site (can't remember) that did this, but I never checked if it was a pure Javascript solution compared to a Flash solution.
I am leaning towards the not side, I believe that breaks the limitations of Javascript, although if there is any solution I would love to hear it. My only worry is it won't be supported that well across different browsers.
I don't think it's possible to drag a file into a page as such.
Though some browsers may allow you to drag a file into a file upload input box. If this is the cease, perhaps you could stretch such an input via CSS and make it transparent/overlay on background to provide a "pretty" drop target.
You can do this with ActiveX, though it would only work in IE.. and here is an article describing how to do a drag/drop upload in Firefox http://straxus.javadevelopersjournal.com/creating_a_mozillafirefox_drag_and_drop_file_upload_script_p.htm
There isn't a generic way of doing this that will work for all browsers with javascript - but you could use a java applet like this: http://www.zackgrossbart.com/hackito/2007/11/28/drag-and-drop-file-uploading-made-easy/
The article which shows how to support drag and drop with an applet is at:
http://www.zackgrossbart.com/hackito/dnd-file-uploading
There's another article which shows how to do this with just JavaScript. This requires HTML5, but it works well.
http://www.thecssnin]ja.com/javascript/drag-and-drop-upload