JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.428/pdf.min.js"></script>
<canvas id="canvas" style="width:50em"></canvas>
JavaScript
var canvasContext = document.getElementById('canvas').getContext('2d');
pdfjsDistBuildPdf.getDocument('//cdn.mozilla.net/pdfjs/tracemonkey.pdf')
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
var renderTask = null;
function renderPage() {
if ( renderTask !== null ) {
renderTask.cancel();
return;
}
var viewport = page.getViewport(1, 0);
renderTask = page.render({
canvasContext: canvasContext,
viewport: viewport,
});
renderTask.then(function () {
renderTask = null;
})
.catch(function(err) {
renderTask = null;
if ( err.name === 'RenderingCancelledException' ) {
renderPage();
return;
}
console.log('Page render error', err);
});
}
renderPage();
renderPage();
})