JSFiddle - React, Tailwind, and code Playground

by kotsoft

HTML

<script src="http://recombine.com/pdf.min.js"></script>
<input type="file" id="file">
<canvas>

JavaScript

var reader = new FileReader();
PDFJS.disableWorker = true;

var canvas = $('canvas')[0];
var context = canvas.getContext('2d');

var dpi = 72;
var border = .5 * dpi;

reader.onloadend = function() {
    PDFJS.getDocument(reader.result).then(function(pdf) {
        pdf.getPage(1).then(function(page){
            var viewport = page.getViewport(150/72, 90);
            console.log(viewport);
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            page.render({canvasContext: context, viewport: viewport});
        });
    });
}

$('#file').change(function() {
    var file = $(this)[0].files[0];
    reader.readAsArrayBuffer(file);
});
$('canvas').click(function(e) {
    var X = e.pageX - this.offsetLeft;
    var Y = e.pageY - this.offsetTop;
    console.log(X-border, 11*dpi - border -Y);
});