-
-
Save ichord/9808444 to your computer and use it in GitHub Desktop.
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script><html> | |
<!-- | |
Created using jsbin.com | |
Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit | |
--> | |
<body> | |
<canvas id="the-canvas" style="border:1px solid black"></canvas> | |
<input id='pdf' type='file'/> | |
<!-- Use latest PDF.js build from Github --> | |
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> | |
<script type="text/javascript"> | |
// | |
// Disable workers to avoid yet another cross-origin issue (workers need the URL of | |
// the script to be loaded, and dynamically loading a cross-origin script does | |
// not work) | |
// | |
PDFJS.disableWorker = true; | |
// | |
// Asynchronous download PDF as an ArrayBuffer | |
// | |
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 = 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 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> | |
<style id="jsbin-css"> | |
</style> | |
<script> | |
</script> | |
</body> | |
</html> |
Anyone landing here trying to render an entire PDF document to to a single canvas...
You cant!
You need to use something like above to render individually before gluing all the resulting canvas together:
<html>
<body>
<input id='pdf' type='file'/>
<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://rawgit.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
window.PDFJS = window.pdfjsLib;
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and dynamically loading a cross-origin script does
// not work)
//
PDFJS.disableWorker = true;
//
// Asynchronous download PDF as an ArrayBuffer
//
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)
const go = async function(){
let h = 0;
for(var pageN = 1; pageN <= pdf.numPages; pageN++){
const page = await pdf.getPage(pageN);
console.log('got a page', pageN);
var scale = 2;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
canvas.height += viewport.height;
canvas.width = viewport.width;
h+= viewport.height;
//
// Render PDF page into canvas context
//
var task = page.render({ canvasContext: context, viewport: viewport })
await task.promise;
// console.log(canvas.toDataURL('image/jpeg'));
}
//
// Now just add super-glue!
//
const canvi = document.querySelectorAll('canvas');
const totalHeight = Array.prototype.reduce.call(canvi, (height, canvas) => height + canvas.height, 0);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = totalHeight;
canvas.width = canvi[0].width;
let y= 0;
canvi.forEach((src, e) => {
context.drawImage(src, 0, y);
y+=src.height;
});
document.body.innerHTML = ''; // lazily delete the other canvi
document.body.appendChild(canvas);
};
go();
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
</body>
</html>
const go = async function() is not including in working even await task.promise; kindly help me
Not working with latest version of pdf.js.
- Deprecated API usage: PDFDocumentLoadingTask.then method, use the
promise
getter instead. - Deprecated API usage: getViewport is called with obsolete arguments.
Working with pdfjs v2.1.266 and below
For viewport error, change as below:
`//var scale = 2;
//var viewport = page.getViewport(scale);
var viewport = page.getViewport({scale: 2});`
Otherwise works perfectly with pdfjs v2.2.228
Just to be precise you must explicitly call .promise for PDFJS.getDocument
PDFJS.getDocument(fileReader.result).promise.then(function getPdfHelloWorld(pdf) {
As well as what rushglen said (Removing var scale and then passing in the scale in the viewport declaration
var viewport = page.getViewport({scale: 2});
This is in response to libmysterion code for multiple page canvas (As PDFJS has updated the above two changes must be made for his example to work)
index.html:20 Uncaught ReferenceError: PDFJS is not defined
PDFJS Global object is deprecated please update the code thanks
I have a working example here
https://qutbi.amuslim.org/views.php?f=/books/0%20lat%20mi%20library/library/quran/quran-colored-hq.pdf
I can't get work any code above
Here is a working example of mine based on the the Mozilla's Hello World with document load error handling example:
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit
-->
<body>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<input id='pdf' type='file' />
<!-- Use latest PDF.js build from Github -->
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
//
// Asynchronous download PDF as an ArrayBuffer
//
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);
var loadingTask = pdfjsLib.getDocument(fileReader.result);
loadingTask.promise
.then(function (pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5;
console.log(page);
var viewport = page.getViewport({ scale: 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
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log(canvas.toDataURL('image/jpeg'));
});
});
}, function (error) {
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
<style id="jsbin-css">
</style>
<script>
</script>
</body>
</html>
Maybe learn how to program?