You possibly have heard of WebODF already, the Open Source JavaScript library for displaying and editing files in the OpenDocument format (ODF) inside HTML pages. For ideas what is possible with WebODF and currently going on, see e.g. Aditya’s great blog posts about the usage of WebODF in OwnCloud Documents and Highlights in the WebODF 0.5 release.
The WebODF library webodf.js comes with a rich API and lots of abstraction layers to allow adaption to different backends and enviroments. There is an increasing number of software using WebODF, some of that listed here.
Those which are interested in the capabilities of WebODF, without needing a custom and highly integrated solution, can additionally go for ready-made simple-to-use components based on WebODF. This blog post is the first of a series to introduce you to those. It starts with the component that gives you embedded display of OpenDocument format files, that is text documents (ODT), presentation slides (ODP) and spreadsheets (ODS), in webpages by just a single (sic!*) line of HTML code:
* no-one would add a line-break there 😉
ViewerJS
ViewerJS is an Open Source document viewer that enables embedded display of ODF or PDF files directly in webpages, without any external server dependencies, just done with HTML, CSS and Javascript. It uses WebODF to display files in the OpenDocument format and PDF.js for files in the PDF format.
Deploying and using ViewerJS with your webpages can be done in a few minutes. Follow this guide and see yourself!
Quickly Added
Start with looking at the current time and noting it.
As example file take an ODP of your choice, otherwise let’s use the slides from a talk at KDE’s Akademy in 2013, akademy2013-ODF-in-KDE-Calligra-WebODF.odp.
If you do not have a webserver handy, create a mini one locally on your system:
# Create a folder structure to serve statically
mkdir htroot# Put the sample ODP file into htroot, renamed as "example.odp"
cp akademy2013-ODF-in-KDE-Calligra-WebODF.odp htroot/example.odp# Add a simple html file:
touch htroot/example.html
Open example.html in an editor and have this as content:
<!DOCTYPE HTML>
<html>
<head>
<title>example.odp</title>
</head>
<body>
<div>We got an ODP file.</div>
<div>Would be nice to show it here.</div>
</body>
</html>
Start a simple webserver program serving that directory, e.g. the one built into Python. For that open a separate console and do:
cd htroot
python -m SimpleHTTPServer
Now browse to http://127.0.0.1:8000/example.html and make sure you see that HTML file.
The ODP file example.odp is not displayed yet, right. Not so nice.
Let’s change that and deploy ViewerJS for it.
In the first console now do:
# Download http://viewerjs.org/releases/viewerjs-0.5.2.zip
# (check if there is a newer version perhaps, then change
# all "0.5.2" below to the new version string)
wget http://viewerjs.org/releases/viewerjs-0.5.2.zip# Unzip the file
unzip viewerjs-0.5.2.zip# Move the folder "ViewerJS" to the toplevel dir of
# the folder structure statically served by the webserver
# (could also be a non-toplevel dir)
mv viewerjs-0.5.2/ViewerJS htroot
Now replace the “Would be nice to show it here.” in the example.html with this code (remove the REMOVEME, workaround to strange WordPress behaviour):
<REMOVEMEiframe id="viewer" src="/ViewerJS/#../example.odp" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>
(in the sources one line, as promised. But add line-breaks as you like 😉 )
Now reload http://127.0.0.1:8000/example.html in your browser. And if everything worked out, you see the ODP file now embedded in the webpage, ready to be read or e.g. presented fullscreen.
Look again at the current time. How minutes did you need? 🙂
ODF or PDF
For publishing done documents that should be only read and not further processed, PDF is the better choice IMHO, because the format specifies the exact positioning of everything.
ODF (same with similar formats like OOXML) leaves the actual fine-layout to the program displaying/printing the document, which can differ between computer systems and setups, usually due to the used font engine. This makes sense, as it allows to create ODF files from code that has no clue about layout calculations, e.g. some Perl script generating a report. But it can result in frustrations if some document with manually optimized layout gets differently layout-ed elsewhere.
Thanks to PDF.js ViewerJS can also nicely display PDFs, so use whatever format suits the needs, be it preview of some document to further process or display of the final result.
Take a PDF file and change the above example to show that instead of the ODP file. Then try also with an ODT or ODS file.
Getting better week by week
The developers of WebODF are constantly enhancing its coverage of the ODF spec. See how the slides template for this year’s GUADEC (of course done in ODP 🙂 ) are almost looking the same in LibreOffice and ViewerJS (v0.5.2):
Currently the Wiki hosting the GUADEC slide templates still has to say:
Current configuration does not allow embedding of the file lightning_talks.odp because of its mimetype application/vnd.oasis.opendocument.presentation
ViewerJS and WebODF hopefully can be a reason to change that soon 🙂
When giving talks about WebODF of course ODPs and ViewerJS are used. Knowing the pitfalls the slides can be done avoiding those. Still many real-life samples not designed for current WebODF capabilities are increasingly well displayed, also e.g.
or
In general are ODF documents with only formatted text and images in SVG, PNG, JPEG or similar no problem for WebODF and thus ViewerJS. But as can be seen next, e.g. native ODF graphic elements are still a TODO (and the result not related to any censoring code 😉 ). But, the display is already good enough for a “preview” 🙂 :
BTW, if you are browsing a website that does not yet use ViewerJS to display ODF files embedded but only provides them as links, there is another WebODF-based option for Firefox users: the ODF viewer Firefox Add-on, that allows viewing ODF documents directly in Firefox on any device, without the need of a (big) office suite.
More on ViewerJS.org
Learn more about ViewerJS on the website ViewerJS.org, e.g. how to support non-embedded custom fonts. Discover the ViewerJS plugin for WordPress. Think about how you and your websites could make use of ViewerJS and how you could help to improve ViewerJS and WebODF, and then contact the ViewerJS and WebODF developers about that! They are looking forward to working together with you as well.
Attracted by virtual constructs 
[…] WebODF easily used, part 1: ViewerJS […]
The power of simplicity. This is amazing.