Menu
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.
469
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
