Using pdf.js in ASP.NET MVC3

Question

I'm looking at the PDF.js project on github and looking at their basic demos I've come up with this (the whole view):

@{
    ViewBag.Title = "GetPDFLetter";
    Layout = null;
}

<!doctype html>
<html>
 <head>
        <title>PDF.JS TEST</title>
        <!-- PDF.js-specific -->
        <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
     <script type="text/javascript" src="@Url.Content("~/PDFScripts/pdf.js")"> </script>

     <script type="text/javascript" src="@Url.Content("~/PDFScripts/core.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/util.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/api.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/canvas.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/obj.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/function.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/charsets.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/cidmaps.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/colorspace.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/crypto.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/evaluator.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/fonts.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/glyphlist.js")"> </script>>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/image.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/metrics.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/parser.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/pattern.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/stream.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/worker.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/jpg.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/jpx.js")"> </script>
  <script type="text/javascript" src="@Url.Content("~/PDFScripts/jbig2.js")"> </script>

       <script type="text/javascript">
           // Specify the main script used to create a new PDF.JS web worker.
           // In production, change this to point to the combined `pdf.js` file.
           var url = '@Url.Content("~/PDFScripts/worker_loader.js")';
           PDFJS.workerSrc = url;
  </script>
 </head>  

 <div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
  </div>

    <script type="text/javascript">

        $(document).ready(function () {

            /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
            /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

            //
            // See README for overview
            //

            'use strict';

            //
            // Fetch the PDF document from the URL using promices
            //
            PDFJS.getDocument('helloworld.pdf').then(function (pdf) {
                // Using promise to fetch the page
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);

                    //
                    // Prepare canvas using PDF page dimensions
                    //
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    //
                    // Render PDF page into canvas context
                    //
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });



        });
    </script> 
</html>

The File helloworld.pdf is in the same folder as the view, but when I run the project nothing gets rendered, just a small rectangle. Have I missed something? Any special considerations? Thanks for any help.

Do we need to add all the javascript files mentioned above ? There are 22 js files in total.. — Ranadheer Reddy
– Ranadheer Reddy, Commented May 7, 2014 at 7:39
@Ranadheer It's been 18 months since i worked with Pdf.js, I'm not sure whats changed etc. You can have a look at the Github issues and try asking there. Regarding the scripts, yea obviously you need them, but you can try bundling them. — ms87
– ms87, Commented May 7, 2014 at 7:46

ms87 · Accepted Answer · 2014-11-01 08:48:26Z

10

Figured it out eventually. What an awesome library PDF.js is.

I've taken the liberty of creating a sample MVC3 project using PDF.js. It follows 90% of the PDF.js demo on github, except a tiny, self explanatory (explained in the comments in the code) change in assigning PDF file paths to the viewer.

edited Nov 1, 2014 at 8:48

answered Dec 21, 2012 at 12:33

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

xm1994 Over a year ago

I can't access the sample project either. Could you perhaps explain what change you needed to make to the file paths?

ms87 Over a year ago

@xm1994 have a look now

Ranadheer Reddy Over a year ago

@MohammadSepahvand: When i replace local file url with external file url, i am getting error. any help ? In the index page, i changed @Html.ActionLink("View Pdf #1", "Viewer", "Home", new { filePath = "Pdf1.pdf" }, null) To @Html.ActionLink("View Pdf #1", "Viewer", "Home", new { filePath = "myExternalFileUrl.pdf" }, null) and in controller i changed filePath = "/MyPDFs/" + filePath; to filePath = filePath; Is there any other place to change the code ?

josliber Over a year ago

Please update this answer to include the code changes needed to solve the problem you described, instead of just linking to an entire software project. Note that links tend to go bad (the link here appears to have already become inaccessible a few times), and this answer would not be helpful to future visitors if the link went down.

Kris van der Mast Over a year ago

Please provide the source code itself, not just some link to a onedrive place as corporate firewalls block it. Keep code on this site or put it on github.

|

Collectives™ on Stack Overflow

Using pdf.js in ASP.NET MVC3

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related