私は 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はビューと同じフォルダーにありますが、プロジェクトを実行すると何もレンダリングされず、小さな長方形だけが表示されます。私は何かを逃しましたか？特別な考慮事項はありますか？助けてくれてありがとう。