2012-12-12 10 views
8

Ich betrachte das Pdf.js Projekt auf Github und einen Blick auf ihre grundlegenden Demos, die ich mit diesem habe kommen (die ganze Sicht):Mit Pdf.js in ASP.NET MVC3

@{ 
    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> 

Die Datei helloworld.pdf befindet sich im selben Ordner wie die Ansicht, aber wenn ich das Projekt ausführe, wird nichts gerendert, nur ein kleines Rechteck. Habe ich etwas verpasst? Irgendwelche besonderen Überlegungen? Danke für jede Hilfe.

+0

Müssen wir alle oben genannten Javascript-Dateien hinzufügen? Es gibt insgesamt 22 js-Dateien. –

+0

@Ranadheer Es ist 18 Monate her, seit ich mit Pdf.js gearbeitet habe, ich bin mir nicht sicher, was sich geändert hat usw. Sie können sich die Github-Probleme ansehen und versuchen, dort nachzufragen. Was die Skripte betrifft, braucht man sie offensichtlich, aber man kann versuchen, sie zu bündeln. –

Antwort

11

Schließlich herausgefunden. Was für eine großartige Bibliothek PDF.js ist.

Ich habe mir die Freiheit genommen creating a sample MVC3 project using PDF.js. Es folgt 90% der PDF.js-Demo auf github, abgesehen von einer kleinen, selbsterklärenden (in den Kommentaren im Code erläuterten) Änderung der Zuweisung von PDF-Dateipfaden zum Betrachter.

+0

Ich kann auch nicht auf das Beispielprojekt zugreifen. Können Sie vielleicht erklären, welche Änderungen Sie an den Dateipfaden vornehmen mussten? – xm1994

+0

@ xm1994 Schau mal –

+0

@MohammadSpahvand: Wenn ich lokale Datei URL durch externe Datei URL ersetzen, erhalte ich Fehler. irgendeine Hilfe ? In der Index-Seite, geändert i ** @ Html.ActionLink ("View PDF # 1", "Viewers", "Home", neuen {filePath = "Pdf1.pdf"}, null) ** Um * *@Html.ActionLink ("View Pdf # 1", "Viewer", "Home", neu {filePath = "myExternalFileUrl.pdf"}, null) ** und im Controller habe ich ** filePath = "/ MyPDFs/"+ filePath; ** bis ** filePath = filePath; ** Gibt es einen anderen Ort, um den Code zu ändern? –