8

我正在查看 github 上的 PDF.js 项目并查看我提出的基本演示(整个视图):

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

该文件helloworld.pdf与视图在同一个文件夹中,但是当我运行项目时,什么都没有渲染,只是一个小矩形。我错过了什么吗?有什么特别的考虑吗?谢谢你的帮助。

4

1 回答 1

10

最终想通了。PDF.js 是一个多么棒的库。

我冒昧地使用 PDF.js 创建了一个示例 MVC3 项目。它遵循了 github 上 90% 的 PDF.js 演示,除了在将 PDF 文件路径分配给查看器方面进行了微小的、不言自明的(在代码中的注释中解释)更改。

于 2012-12-21T12:33:47.913 回答