Reading PDF and XPS on your Windows 8 application using WinRT - Eternal Coding - HTML5 / Windows / Kinect / 3D development - Site Home - MSDN Blogs

Reading PDF and XPS on your Windows 8 application using WinRT


 

Reading PDF and XPS on your Windows 8 application using WinRT

  • Comments 11

PDF and XPS file formats are widely used across the world and you could need one day to display them inside your application.

Today I would like to share with you a simple way to do so by using an open source solution: MuPDF (a multiplatform lightweight PDF and XPS viewer).

MuPDF is already working on a WinRT solution you can grab on this GIT repo: http://git.ghostscript.com/?p=user/mvrhel/mupdf.git;a=summary

I also used the work of Libreliodev and especially their advanced port of MuPDF for WinRT.

The result is a simple but really useful Windows 8 Modern UI app that is able to display a PDF/XPS file: http://www.catuhe.com/msdn/pdfreader.zip

The solution is based on two projects:

  • MuPDF.winRT: a C++/CX WinRT component built upon MuPDF
  • PDFReader: A C#XAML project that used the WinRT component to display a PDF

For this article I created a C#/XAML application. But because MuPDF.winRT is a WinRT component, you can also use it from a HTML5/CSS3/Javascript app!

Using the WinRT component, you just have to use the following line to create a Document (which is the class used to interact with a PDF or a XPS):

pdfDocument = Document.Create(readBuffer, DocumentType.PDF, (int)Windows.Graphics.Display.DisplayProperties.LogicalDpi);

To draw a page, you just have to use the previous pdfDocument object and call the DrawPage method:

pdfDocument.DrawPage(PageNumber, buf, 0, 0, width, height, false);

This method draws a given page inside a IBuffer. To create it you just have to instantiate a WriteableBitmap and the inner PixelBuffer:

var size = Document.GetPageSize(PageNumber);
var width = (int)(size.X * ZoomFactor);
var height = (int)(size.Y * ZoomFactor);

var image = new WriteableBitmap(width, height);
IBuffer buf = new Buffer(image.PixelBuffer.Capacity);
buf.Length = image.PixelBuffer.Length;

The buffer is then copied back to the WriteableBitmap:

using (var stream = buf.AsStream())
{
    await stream.CopyToAsync(image.PixelBuffer.AsStream());
}

And finally the result is displayed on screen:

image

You can even display two pages on the same image:

await Task.Run(() => pdfDocument.DrawFirtPageConcurrent(PageNumber, buf, width, height));
await Task.Run(() => pdfDocument.DrawSecondPageConcurrent(PageNumber + 1, buf, width, height));

image

Using the mouse or the touch you can obviously navigate inside the document or zoom on pages. And with the power of vectorized PDF, you will always have the best display quality:

image

Optical zoom (bitmap based)

image

Vectorized zoom

To display these images, I used a simple FlipView so that I do not have to bother about gestures. The DataTemplate used for every page is based on a ScrollViewer in order to automaticaly handle zoom in and zoom out:

<FlipView Name="flipView">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer
                ZoomMode="Enabled" 
                HorizontalScrollMode="Auto"
                VerticalScrollMode="Auto"
                VerticalSnapPointsType="None"
                HorizontalSnapPointsType="None"
                HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto"
                MinZoomFactor="1"            
                MaxZoomFactor="4">
                <Image Source="{Binding Image}" Width="{Binding Width}" Height="{Binding Height}" 
Stretch="Uniform" HorizontalAlignment="Center" Margin="0"/> </ScrollViewer> </DataTemplate> </FlipView.ItemTemplate> </FlipView>

Simple, isn’t it ?

Leave a Comment
  • Please add 1 and 2 and type the answer here:
  • Post
  • You should add a warning to your post clarifying that MuPDF is GPL, and using it in commercial closed-source applications without paying for it could be illegal.

  • Thanks, how can i align the 2 pages to the center and don't let move. Only if the zoom excede the screen, like librelio on their sample projects.

  • Can I use this library in Windows Phone 8?

    I try to used javascript PDF Reader have load file issue in Windows Phone 8.  Any suggestion are welcome.

    Thanks

  • Can I use this pdf reader for Windows phone 8

  • Theoricaly yes, but I didn't try

  • Can any one help me ,

    I  have to show a PDF in my Metro app  page.

    page contains two  controls to bind the PDF in order by Page no.

    When i am load in the page first  empty PDF image  will show.

    Once the Download complete the PDF show on the page one by one.

    Thanks in Advance

  • Hi All,

    I want to bind the separate PDF pages in a single flip view item using this MuPDF SDK. Can we do this?

    I have created a class that has two DocumentPage class object and assign the values to both. But it does not show the page.

    Please let me know if there is any possible ways...

    Thanks

  • This is GPL project so it is not suitable unless you can divulge source.

    A commercial alternative is PDFTron: www.pdftron.com/.../windows8_winrt_pdf_library.html

  • PDF Rendering in Store apps has become really easy with Windows 8.1.

    Windows 8.1 now has PDF rendering APIs and ability to save/show PDF pages as images. Check out samples @

    code.msdn.microsoft.com/.../PDF-viewer-sample-85a4bb30

  • btw, there is another library - Apitron PDF Rasterizer that works on Windows8, winRT and windows phone 8, so if you need PDF to image functionality you may try it.

  • Libreliodev's advanced port of MuPDF for WinRT is fork of this library github.com/.../MuPDF.WinRT (there you could find WP8 version too)

Page 1 of 1 (11 items)