I'm implementing some code to to view a PDF file after selecting it from our computer, but I am getting some errors
I have tried with 'pdf.js' but I'm getting some error that 'PDFJS' or 'pdfjsLib' is not defined
function showInCanvas(url) {
'use strict';
var pdfAsArray = convertDataURIToBinary(url);
pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
The error message that I get is:
Uncaught ReferenceError: pdfjsLib is not defined
Why are you depend on external library to preview pdf file even you could do it using iframe object.you just need to read file from file control and assign file object to iframe.
var file =document.getElementById("filecontrol").files[0];
var url =URL.createObjectURL(file );
$('#iframeid').attr('src',url);
HTML :
<iframe id="iframeid" width="x" height="y"></iframe>
Related
I am trying to write some code that converts the first page of a PDF to a PNG thumbnail. I have found several examples here on stackoverflow and other place on the web and it seems like a simple thing to do, but I cannot make it work.
I have a HTML file that looks like this
<!DOCTYPE html>
<html>
<head>
<title>JR PDF test</title>
</head>
<body>
<script type="text/javascript" src="/build/pdf.js"></script>
<script type="text/javascript" src="jr-pdf.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
</body>
<div id="pdf-main-container">
<a id="download-image" href="#">Download PNG</a>
</div>
</div>
</html>
<canvas id="the-canvas"></canvas>
and a the jr-pdf.js looks like this
// URL of PDF document
var url = "REGLEMENT_FOR_RALLY_2012.pdf";
// Asynchronous download PDF
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// Set scale (zoom) level
var scale = 1.5;
// Get viewport (dimensions)
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
// JR experiments
console.log('hej');
url = canvas.toDataURL();
downloadButton = document.getElementById('download-image');
downloadButton.setAttribute('download', 'jr.png');
downloadButton.setAttribute('href', url);
});
The first page of the PDF file is rendered correctly to the screen and a jr.png file is generated. When I look at the PNG file the header seems right, but when I try to view the file with an image viewer it is empty (actually it is shown as transparent).
So I guess these lines are wrong:
url = canvas.toDataURL();
downloadButton = document.getElementById('download-image');
downloadButton.setAttribute('download', 'jr.png');
downloadButton.setAttribute('href', url);
Any suggestions on how to make a correct PNG file?
page.render is asynchronous function -- you need to wait until it finishes painting
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
// use canvas now
var url = canvas.toDataURL();
var downloadButton = document.getElementById('download-image');
downloadButton.setAttribute('download', 'jr.png');
downloadButton.setAttribute('href', url);
});
I've managed to display a sample PDF file using mozilla's pdf.js. On the 1st page of the PDF file there is one internal link to page 2 and one external link to google.com.
My next step is getting the links in the sample PDF to work (be clickable) and I'm struggling with this one.
At the moment all I can do is get the links/annotations and print them to the console. Can anyone help me render these links to the annotations div layer?
I've looked through the pdf.js docs but I can't quite find what I'm looking for... I'm just looking to add this clickable links feature to the simple code below.
Here is a code pen of my progress so far: http://codepen.io/laurencemeah/pen/ONrJXj
var pdfFile = 'URL PATH TO PDF FILE';
var pageNum = 1;
PDFJS.getDocument(pdfFile).then(function(pdf) {
pdf.getPage(pageNum).then(function(page) {
var desiredWidth = document.getElementById('pdf-holder').getBoundingClientRect().width;
var viewport = page.getViewport(1);
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport(scale);
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext: context,
viewport: scaledViewport
};
page.render(renderContext);
page.getAnnotations().then(function(data) {
console.log(data);
// now display them in annotation layer div
});
});
});
#pdf-holder {
width: 100%;
height: auto;
<script src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>
<div id="pdf-holder">
<canvas id="pdf-canvas"></canvas>
<div id="annotation-layer"></div>
</div>
I'm currently writing a simple Android App due to testing purpose. In it there's a WebView-Element in which a html-File (with javascript (Mozilla PDFJS)) from asset folder should be displayed. From Fragment-Code:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);
with content already containing the folowing html:
<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';
PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
mypdf = pdf;
renderPage(currentPage);
});
function renderPage(pageNumber) {
mypdf.getPage(pageNumber).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('viewer');
var context = canvas.getContext('2d');
canvas.height = viewport.height-40;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
</script>
....
<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
</body>
In logcat I receive the following chromium console output and due to that rendering of the requestet pdf-page does not happen (still, the header is displayed normally)
I/chromium﹕ [INFO:CONSOLE(22)] "Uncaught (in promise) TypeError: Cannot read property 'getContext' of null", source: file:///android_asset/ (22)
Line 22 refering to
var context = canvas.getContext('2d');
When I load the exact same file from a remote server (replacing the file:///-links) via webView.loadUrl("http://www.dennissch.de/pdftest/"); everything works fine.
So how come that document.getElementById seems not to work on the local file?
That might be due to the fact that your script tag is declared above the canvas. try to put your tag below the viewer, and it should work
<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';
PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
mypdf = pdf;
renderPage(currentPage);
});
function renderPage(pageNumber) {
mypdf.getPage(pageNumber).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('viewer');
var context = canvas.getContext('2d');
canvas.height = viewport.height-40;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
</script>
</body>
Or at least put the call to renderPage below the viewer in an other script tag
I'm trying to display a PDF within an iFrame, for a PHP, HTML and CSS based web "app" on the iPad. However, when viewing a PDF that's either in an object or in an iFrame, on the iPad, you can't change the page you are viewing. The scrolling just doesn't seem to work.
So my thought is that I need to create a next and prev button that uses javascript to change the currently viewed page. However, I can't seem to find any information on how to achieve this without embedding code in the PDF. This is not an option for the app though, as users will obviously not know how to embed code in the PDF's they upload.
I'd really love any information on how to achieve this solution w/o modifying the PDF's. Also, if there is an alternative to using an object or iFrame that will make this work on the iPad, that would be great too.
Thanks in advance.
This can be done using PDF.js
Their webpage can be found here: http://mozilla.github.io/pdf.js/
I didn't want to use their solution at first, because I heard it will have issues rendering some PDF's. However, so far, it appears to render our PDFs perfectly.
Here is some code I used to implement the process
PDFJS.getDocument('FILE_LOCATION').then(function(pdf) {
state = true;
cur_page = 1;
total_pages = pdf.numPages;
pdf.getPage(cur_page).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);
});
$(".pdf_viewer").on("click", ".prev_page", function(e) {
e.preventDefault();
if( state && cur_page > 1 ) {
--cur_page
pdf.getPage(cur_page).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);
});
}
});
$(".pdf_viewer").on("click", ".next_page", function(e) {
e.preventDefault();
if( state && cur_page < total_pages ) {
++cur_page;
pdf.getPage(cur_page).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);
});
}
});
$(".pdf_viewer").on("click", ".close_window", function(e) {
e.preventDefault();
if( state ) {
state = false;
pdf.destroy();
}
});
EDIT: fixed a typo
I can set the src of an image to preview a dropped image file, but how about a pdf?
(If not a preview thumbnail, then how about file type icons at least?)
Obviously, PDF files are not web compliant, so we have to make use of external libraries which help us deal with these type of files. A very well-known is the Mozilla PDF JS library.
Now do a preview of the first page of the pdf file.
//
// Asynchronous download PDF as an ArrayBuffer
//
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
if (file = document.getElementById('pdf').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
// console.log(ev);
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
// console.log(pdf)
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 0.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 task = page.render({
canvasContext: context,
viewport: viewport
})
task.promise.then(function() {
// console.log(canvas.toDataURL('image/jpeg'));
});
});
}, function(error) {
// console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
<script src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<input id='pdf' type='file' />
The way to implement this is to get the file type when you are doing the upload of the pdf and save. when you displaying the record you can just do a check to see the file type