I am using Mozilla pdf js in meteor. The package I am using is from "https://atmospherejs.com/pascoual/pdfjs" I am doing almost everything that they have stated in their example, but my pdf file is delivered as a image file. It is not getting displayed as shown in their example "https://mozilla.github.io/pdf.js/web/viewer.html".
Please let me know what have I done wrong. My code is as follows:
<template name="displayResume">
<canvas id="pdfcanvas"></canvas>
</template>
Template.displayResume.rendered = function(){
PDFJS.workerSrc = '/packages/pascoual_pdfjs/build/pdf.worker.js';
console.log(PDFJS)
//PDFJS.workerSrc = '/.meteor/local/build/programs/web.browser/packages/pascoual_pdfjs/build/pdf.worker.js';
var url = '/Lez6dci9xoaiyWuzR.pdf';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
// Fetch the first page
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('pdfcanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
page.render({canvasContext: context, viewport: viewport}).promise.then(function () {
console.log('rendered');
});
});
});
}
I am just trying to display resume from my public folder as of now. Later, I will have to display file from amazon aws.
Thanks in advance
What Browsers does PDF. js Support. PDF. js is used within Mozilla Firefox today as the built-in PDF viewer, and it works well within a website when viewed using the latest versions of Chrome and Firefox, whether through the pre-built PDF.
PDF. js is a good free option if you're willing to invest time into implementing a UI for it. The project comes with some examples and API docs.
PDF. js leverages Asynchronous JavaScript and XML (AJAX) to download the PDF file from a web server and parse its contents. Once prepared, content is then rendered onto an HTML5 <canvas> element using canvas drawing commands.
they had a pageviewer example here:
https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.js
I think the line you are looking for is:
textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
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