Skip to content

Instantly share code, notes, and snippets.

@fcingolani

fcingolani/index.html

Created August 9, 2012 02:16
Show Gist options
  • Star 80 You must be signed in to star a gist
  • Fork 22 You must be signed in to fork a gist
  • Save fcingolani/3300351 to your computer and use it in GitHub Desktop.
Save fcingolani/3300351 to your computer and use it in GitHub Desktop.
Download ZIP
How to render a full PDF using Mozilla's pdf.js
Raw
index.html
<html>
<body>
<!-- really dirty! this is just a test drive ;) -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
</script>
<div id="holder"></div>
<script type="text/javascript">
renderPDF('sample.pdf', document.getElementById('holder'));
</script>
</body>
</html>
@JMIdeaMaker
Copy link

doesn't work with the newest version, 2.6.347

@levenokk
Copy link

levenokk commented Mar 18, 2021 •
edited

It`s working now

<div id="my_canvas"></div>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.min.js" /> 
<script>
function renderPDF(url, canvasContainer) {

	function renderPage(page) {

    let viewport = page.getViewport({scale: .5})
    const DPI = 72;
    const PRINT_OUTPUT_SCALE = DPI/72; 
    const scale = canvasContainer.clientWidth / viewport.width;
		const canvas = document.createElement('canvas')
    
    const ctx = canvas.getContext('2d')
    viewport = page.getViewport({scale})

    canvas.width = Math.floor(viewport.width * PRINT_OUTPUT_SCALE);
    canvas.height = Math.floor(viewport.height * PRINT_OUTPUT_SCALE);
    canvas.style.width = '100%';

    canvas.style.transform = 'scale(1,1)';
    canvas.style.transformOrigin = '0% 0%';
  
    const canvasWrapper = document.createElement('div');

    canvasWrapper.style.width = '100%';
    canvasWrapper.style.height = '100%';
  
    canvasWrapper.appendChild(canvas);

		const renderContext = {
			canvasContext: ctx,
			viewport,
		}

		canvasContainer.appendChild(canvasWrapper)

		page.render(renderContext)
	}

	function renderPages(pdfDoc) {
		for (let num = 1; num <= pdfDoc.numPages; num += 1)
			pdfDoc.getPage(num).then(renderPage)
	}

	pdfjsLib.disableWorker = true
	pdfjsLib.getDocument(url).promise.then(renderPages)
}

renderPDF('../files/test.pdf', document.getElementById('my_canvas')) //div element

</script>

@beingshaif
Copy link

thanks @levenokk

@Ajitpatil92002
Copy link

Thank you @levenokk

@huunamtn
Copy link

huunamtn commented Jul 22, 2022 •
edited

how to add zoom functionality in above mention code so that after zoom it stay on the same page?

add html zoom
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>

<script> document.getElementById('zoom_in').addEventListener('click', (e) => { if(options.scale < 4) { options.scale += 0.5; document.querySelector("#holder").style.zoom = options.scale; } }); document.getElementById('zoom_out').addEventListener('click', (e) => { if(options.scale > 1) { options.scale -= 0.5; document.querySelector("#holder").style.zoom = options.scale; } }); </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment