locked
embeding pdf's in an HTML5 windows app

    Question

  • All,

    I'm doing some testing around for an app I'm going to be building. One of the things I'll need to have is the ability to render a PDF in the app. I see the debugger notes "Windows Web Applications supports a limited set of ActiveX controls." Is PDF just not supported?

    I have a windows 7 version of pdf viewer installed on my developer preview box and it works fine in the normal browser.

    The html i'm using is just a plain embed tag.  

    <embed src="/PDFs/sample.pdf" width="500" height="375" type="data/pdf">

    Please let me know if there's something I'm doing wrong, or if this just isn't supported yet.

     

    Thanks!

    Bryan

     

    Friday, November 04, 2011 12:55 AM

All replies

  • Hi Bryan,

    PDF embedding is not supported.  You should have observed that the Metro IE also does not allow you to use this add-in.

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 1:18 PM
    Moderator
  • Thanks for the response Jeff.

     

    Is this something that will be possible if pdf ends up baked into windows 8? or even embedding xps files, or is it only html/text based content that's supported?

    Friday, November 04, 2011 5:07 PM
  • Currently no, this would require an ActiveX control to host the document viewer in HTML.  http://msdn.microsoft.com/en-us/library/windows/apps/hh465380(v=VS.85).aspx#activex_controls.  The way PDF files currently work are though add-ins.  What type of data are you wanting to display that you would require PDF or XPS in your Metro App?  Could you use something else like SVG?

    -Jeff

     


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 5:39 PM
    Moderator
  • The app I'm trying to make is a port of my clients existing iPad app. They use it out in the field to show off some of their products. The current version looks similar to the split screen interface sample application, showing off groups of available product documents on the left, and clicking on it to view the actual document on the right. These product documents are PDFs currently.

    I could look into writing a script that converts all of the documents from pdf to svg, that might be a possible alternative. I'll have to see how the converted documents turn out. I haven't tried that before.

     

    -Bryan

    Friday, November 04, 2011 6:13 PM
  • That makes sense!

    There are some open source projects that you may be able to leverage to convert PDF to SVG.  Sounds like an opportunity to me to provide a custom control that can do that on the fly for Metro!

    -Jeff


    Jeff Sanders (MSFT)
    Friday, November 04, 2011 6:17 PM
    Moderator
  • It sounds like an excellent opportunity to do that! I'll post back if I get this stuff worked out.

    Thanks for the help!

    Friday, November 04, 2011 6:23 PM
  • Sup Bryan Buddy?

    A PDF to SVG script would be really cool, but I'm not sure how fast it would be (or how time consuming to dev). Another option would be to have a native or managed component library that you call out to via WinRT. In other words: a DLL that can rasterize pages of a PDF and save that image to the application's temp folder, your WWA could then get that image and include it in the page.


    Senior Dev for Windows Phone Services
    Friday, November 04, 2011 10:30 PM
  • Hey Bryan 2.0,

    Thanks for the input, that sounds more similar to what I was thinking actually. I would agree that converting pdf to svg on the fly would probably not be great from a usability perspective. But if you had a control that had a handler for rendering, and then cached its responses somewhere, it would at least get better over time.

    The other, way easier idea, is to just run a script to convert them all to SVG in one shot and then not worry about it. Performance would be much better that route, no custom controls would be needed either.

     

    Bryan

    Friday, November 04, 2011 11:50 PM
  • Bryan,

    Definitely!  If you have the option of converting these beforehand, that would be the way to go!

    -Jeff


    Jeff Sanders (MSFT)
    Monday, November 07, 2011 3:30 PM
    Moderator
  • There's also this effort: https://github.com/mozilla/pdf.js

    Which seems like a pretty neat idea, though I think they still have a lot of work to do and it doesn't seem to work so well in IE at the moment. In the long run I'd love to see a JS solution for this problem that works in all modern browsers.

    Cheers,

    -Jeff

    Monday, November 07, 2011 8:47 PM
  • All -

    I spent some more time looking into this and made some good progress, the only issue is i'm not sure this will ever work great. I've tried a few different means of converting pdf to svg and all of them render out a *giant* file per page.

    Aside from the fact that it takes up quite a large amount of hard drive space (on what would likely be a tablet) doing this, it cripples the rendered page when you attach a 2.5mb svg file to the dom. Adding the item takes around 5 seconds, then once its there the page becomes unresponsive. I've tried multiple ways of appending the svg element to the container and none of them are performant.

    Does anyone have any ideas on how this could be worked around?

    Thanks!

    Bryan

    Friday, December 02, 2011 8:51 PM
  • Is this something that will be permanent, Jeff? Will we ever have PDF support in IE 10? Or are you trying to move away from ActiveX controls in the new version?


    Saturday, December 03, 2011 1:27 PM
  • Hi J,

    IE 10 supports PDFs today.  We were talking about Metro Style applications in this thread!

    -Jeff


    Jeff Sanders (MSFT)
    Saturday, December 03, 2011 3:08 PM
    Moderator
  • Hi Jeff,

    what do you mean by "add-ins"? Are you saying we have to write our own PDF Viewer as a WinRT component? We really need PDF display in our Metro App.

     

    Phil

    Thursday, January 26, 2012 5:34 PM
  • Hi Phil,

    Can you explain your app scenario where you are required to display a PDF within your Metro style app?  Is it feasible to allow the default installed PDF reader to render your PDF content instead, putting the choice of PDF reader into your customer's hands?  If not, can you outline the impact of having an external PDF viewer over an embedded reader in your app?

    Thanks,

    -Jeff


    Jeff Sanders (MSFT)
    Thursday, January 26, 2012 6:41 PM
    Moderator
  • Hello Jeff,

    we have a browsable document collection that should be displayed as thumbnails (first page of pdf, word, etc file) and when the user opens the document he should be able to view it. You are absolutely right we could just open the file with the associated app. There is no need to display it inside our app directly. How would we spawn the pdf reader?

    I am all for giving the customer control over his device. But we also aim to integrate our solution in the best possible way. Maybe I can explain more about our app in a private channel via E-Mail philipp@doo.net ?

     

    Thanks,

    Phil

    Thursday, January 26, 2012 6:58 PM
  • Hi Phil,

    You can launch a program associated with a file by using this api:

            Windows.System.Launcher.launchDefaultProgramForFile(file);

            http://msdn.microsoft.com/en-us/library/windows/apps/hh452687.aspx

    You can contact me through this link if you do not want to share your proprietary information publically:

    http://blogs.msdn.com/b/jpsanders/contact.aspx

    -Jeff


    Jeff Sanders (MSFT)
    Thursday, January 26, 2012 8:04 PM
    Moderator
  • Thank you Jeff.

    Seems all pretty easy and straight forward!

     

    Contacted you via the link provided.

    Thursday, January 26, 2012 11:05 PM
  • All,

    As I tried pdf.js from Mozilla's github seems to work with Windows Store Apps. But with some problem.

    It worked with some PDF file (I tried with an invoice PDF file from Windows Azure subscription.) But it does not work with some file (I tried with files saved as .PDF from Microsoft Word 2013).

    I tried debugging inside the pdf.js and found that it knows how many pages this file have, and the viewport size seems correct. The process seems to work fine except that the output is nothing more than an empty canvas.

    I tried added reference to compatability.js and the app crashed without stopping/breaking anywhere in the code. I cannot debug further.

    Anyone can use pdf.js with Windows Store apps? Please share how you did it.

    Thursday, April 18, 2013 7:59 AM
  • Another Option would be mupdf

    http://blogs.msdn.com/b/eternalcoding/archive/2013/04/15/reading-pdf-and-xps-on-your-windows-8-application-using-winrt.aspx

    Thursday, April 18, 2013 9:13 AM
  • in Russian Win Sore we got libertyreader dot com  - totally on pdf.js
    You can try - " Установить " on the button means Install (from the Store)
    Wednesday, June 26, 2013 3:49 PM
  • I've been trying to use pdf.js in a Windows app as well and it doesn't seem to be working. If you got this going, can you share your solution?
    Sunday, November 24, 2013 5:44 PM