Office Web Apps Image Generation

Slalom Consultant Brett Hovenkotter

Slalom Consultant Brett Hovenkotter has extensive experience as a Development Team Lead across a broad range of methodologies, technologies and architectures.

In 2010 Microsoft brought its largest business to the Cloud with Office Web Apps. Aside from Microsoft’s hosted version that is available to everyone, Office Web Apps can be installed on your own Windows Server environment.

On a recent project my team was building a SharePoint 2010 site that would host a number of files that users can download, including Word and PowerPoint documents. The client had a requirement that the site display thumbnails of the first page or slide of these files. Fortunately, Office Web Apps supplies an API to generate images from Office files. You can download the specifications for the Web Handlers for Word and PowerPoint from MSDN.

First you have to call the Mobile Doc Handler which is a simple ASHX and returns an XML document that contains the data you need to generate the images. The URL will look something like this when integrated with SharePoint:

http://example.com/SiteName/_layouts/MobileDocHandler.ashx?doc=/SiteName/DocumentList/Document.docx

The resulting XML will look something like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<mobileDoc>

<document pages=”1″ dxpInch=”294912″ dypInch=”294912″>

<pageset width=”1474560″ height=”1908326″ count=”8″ />

</document>

<pageXml url=”./MobilePageHandler.ashx?d=F3e81b8824afd4fc5a11f1d79c1892989mfbd23664553f4d0a9b
43789ec496bd33mb2b3efe77e8644ccb9e9c07ae2d5a0b1m&amp;z=B2B3EFE7-7E86-44CC-B9E9-C07AE2D5A0B12&amp;v=00000000-0000-0000-0000-00000000010b” page=”n” start=”s” length=”l” />

<pageImage url=”./MobilePageHandler.ashx?d=F3e81b8824afd4fc5a11f1d79c1892989mfbd
23664553f4d0a9b43789ec496bd33mb2b3efe77e8644ccb9e9c07ae2d5a0b1m&amp;z=B2B3EFE7-7E86-44CC-B9E9-C07AE2D5A0B12&amp;v=00000000-0000-0000-0000-00000000010b” image=”n” start=”s” length=”l” width=”width” height=”height” format=”fmt” />

</mobileDoc>

The value at mobileDoc/document/pageset@count gives you the number of pages in the document. The attributes of mobileDoc/pageImage gives you a URL and HTTP parameters to download your image.

In this example I want an image of the first page of the document (which is represented as p2 because p1 is a cover page that OWA creates for you) in the PNG format with a width of 500 pixels and a height of 647 pixels. The resulting image URL looks like this:

http://example.com/SiteName/_layouts/MobilePageHandler.ashx?d=F3e81b8824afd4fc5a11f1d79c1892989mfbd
23664553f4d0a9b43789ec496bd33mb2b3efe77e8644ccb9e9c07ae2d5a0b1m&z=B2B3EFE7-7E86-44CC-B9E9-C07AE2D5A0B12&v=00000000-0000-0000-0000-00000000010b&n=p2.img&fmt=png&width=500&height=647

Note that the URL must be decoded (i.e. &amp; must be converted to &).

For a PowerPoint the Handler URL would look like this:

http://example.com/SiteName/_layouts/MobilePresentation.ashx?&PresentationId=/SiteName/DocumentList/Presentation.pptx

The resulting XML:

<?xml version=”1.0″ encoding=”utf-8″ ?>

<p:mobilePres xmlns:p=”http://schemas.microsoft.com/server/powerpoint/2009/mobile”&gt;

<p:slideImage url=”./MobileSlideImage.ashx?presentationId=d%3DF685daaccf3114bb7b7b6d5ca8be041e5m4e4af24cf5f
6423287f03f6aa330bef1m5efdf2e575be4077907d89c9eac78fddm%26z%3D5EFDF2E5%2D75BE%2D4077%2D907D%2D89C9EAC78FDD2″ image=”imageId” width=”width” height=”height” format=”format” />

<p:slideInfo url=”./MobileSlideInfo.ashx?presentationId=d%3DF685daaccf3114bb7b7b6d5ca8be041e5m4e4af24cf5f
6423287f03f6aa330bef1m5efdf2e575be4077907d89c9eac78fddm%26z%3D5EFDF2E5%2D75BE%2D4077%2D907D%2D89C9EAC78FDD2″ info=”infoId” />

<p:pres xmlns:p=”http://schemas.microsoft.com/server/powerpoint/2009/mobile&#8221; ver=”0″>

<p:docPr w=”640″ h=”480″ />

<p:sldLst>

<p:sld title=”Slide 1 Title” id=”256″ sldImg=”img256.png” sldInfo=”256.sldInfo.xml” />

<p:sld title=” Slide 2 Title ” id=”257″ sldImg=”img257.png” sldInfo=”257.sldInfo.xml” />

<p:sld title=” Slide 3 Title ” id=”258″ sldImg=”img258.png” sldInfo=”258.sldInfo.xml” />

</p:sldLst>

</p:pres>

</p:mobilePres>

There is an element at p:mobilePres/p:pres/p:sldLst/p:sld for each slide.

The example image is of the first slide in the PNG format with a width of 400 pixels and a height of 300 pixels and the URL is:

http://example.com/SiteName/_layouts/MobileSlideImage.ashx?presentationId=d%3DFfa958c13cf5743d38dd1ec497cfcdbddm3fd0f1f7b0724a50967d
9ddb60669426mf28e1edc98ff4d7a8d342f2c5eec06d1m%26z%3DF28E1EDC%2D98FF%2D4D7A%2D8D34%2D2F2C5EEC06D13&imageId=img256.png&format=png&width=400&height=300

In the end my Office Web Apps based thumbnail generator worked well. We did wrestle with a bug where some of the Word document pages would get cut in half if that page or other pages in the document had multiple columns in them, however we weren’t on the latest version of OWA and that issue has likely already been addressed.

subscribe by emailSubscribe to be emailed about new Software Development posts.

subscribe by emailSubscribe to be emailed about new SharePoint posts.

About Brett Hovenkotter
Slalom Consultant Brett Hovenkotter has extensive experience as a Development Team Lead across a broad range of methodologies, technologies and architectures.

4 Responses to Office Web Apps Image Generation

  1. Nice post 😀

    The count number in the pageset node for Word documents is not the actual page count.

    For a 2 page document I got the count of 5. Seems it splits the pages in a different manner with this API. In general there seems to be two images building up one page, but this is only an approximation on the tests I’ve done, not a rule of thumb.

  2. gogi100 says:

    i installed the office web apps on my sharepoint 2010 but i cannot open preview of docx, pptx files. how call Mobile Doc Handler ashx?

  3. gogi100 says:

    one more question where’are resulting xml files. can i change those files?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: