fcingolani/index.html

DevKamran · 2018-01-31T11:06:25Z

asdasdasd

mandy6720 · 2018-02-08T21:40:53Z

Couldn't you also use Promise.all()?

renderPages() {
  const pagePromises = [];
  PDFJS.getDocument(url).then((pdf) => {
    for (let i = 1; i <= pdf.numPages; i += 1) {
      // Push the promises into promise array
      pagePromises.push(pdf.getPage(i));
    }
    // When loop finishes, call Promise.all() to 
    // wait until all promises resolve and returns 
    // results array
    Promise.all(pagePromises).then((resultsArr) => {
      // render pdf pages
    })
  });
}

Since the promises are pushed into the promise array in the correct order, they would render in the correct order :)

Sreekanthp74 · 2018-06-12T13:34:18Z

How can I get an editable PDF in the canvas using pdfjs?

WilsonYesidRiveraCasas · 2018-08-02T15:53:34Z

Hi, I have a problem.
index.html:34 Uncaught ReferenceError: PDFJS is not defined at renderPDF (index.html:34) at index.html:43 renderPDF @ index.html:34 (anonymous) @ index.html:43

Line 34:

PDFJS.disableWorker = true;

Here's the code :

<html>
<body>

<!-- really dirty! this is just a test drive ;) -->

<script type="text/javascript" src="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('file.pdf', document.getElementById('holder'));
</script>  

</body>
</html>

The-Don-Himself · 2018-08-05T22:25:10Z

@WilsonYesidRiveraCasas don't use the unreleased/unstable version 2, please stick to version 1.x

DevTheUIDeveloper · 2018-09-11T07:01:42Z

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

kishandonepudi · 2018-09-11T10:48:56Z

@Sreekanthp74 +1

amazingalain · 2018-12-16T00:04:21Z

is it possible to JUST render specific range or page o a pdf ? like... page 3 to page 6 ?

parmodkumarr · 2019-02-20T07:13:57Z

`

PDF.js 'Hello, world!' example

        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        
        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'worker.js';
        var loadingTask = pdfjsLib.getDocument(url);
            loadingTask.promise.then(function(pdf) {
        			 var __TOTAL_PAGES = pdf.numPages; 
        			  // Fetch the first page
        			  var pageNumber = 1;			  
        			for( let i=1; i<=__TOTAL_PAGES; i+=1){
        	var id ='the-canvas'+i;
        	$('#canvas_div').append("<div style='background-color:gray;text-align: center;padding:20px;' ><canvas calss='the-canvas' id='"+id+"'></canvas></div>");				
        				  var canvas = document.getElementById(id);
        				  //var pageNumber = 1;
        				  renderPage(canvas, pdf, pageNumber++, function pageRenderingComplete() {
        					if (pageNumber > pdf.numPages) {
        					  return; 
        					}
        					// Continue rendering of the next page
        					renderPage(canvas, pdf, pageNumber++, pageRenderingComplete);
        				  });				
        			}
        	  
            });
        
            function renderPage(canvas, pdf, pageNumber, callback) {
              pdf.getPage(pageNumber).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});
        
                var pageDisplayWidth = viewport.width;
                var pageDisplayHeight = viewport.height;
        		//var pageDivHolder = document.createElement();
                // Prepare canvas using PDF page dimensions
                //var canvas = document.createElement(id);
                var context = canvas.getContext('2d');
                canvas.width = pageDisplayWidth;
                canvas.height = pageDisplayHeight;
               // pageDivHolder.appendChild(canvas);
        
                // Render PDF page into canvas context
                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                page.render(renderContext).promise.then(callback);
              });
            }           
     </script>
     <html>

`

JMIdeaMaker · 2020-09-11T23:51:34Z

doesn't work with the newest version, 2.6.347

levenokk · 2021-03-18T06:55:52Z

It`s working now

<div id="my_canvas"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 · 2022-02-10T12:22:21Z

thanks @levenokk

Ajitpatil92002 · 2022-03-27T10:52:07Z

Thank you @levenokk

huunamtn · 2022-07-22T10:06:30Z

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>

fcingolani/index.html

DevKamran commented Jan 31, 2018

mandy6720 commented Feb 8, 2018 •

edited

Loading

Sreekanthp74 commented Jun 12, 2018

WilsonYesidRiveraCasas commented Aug 2, 2018

The-Don-Himself commented Aug 5, 2018

DevTheUIDeveloper commented Sep 11, 2018

kishandonepudi commented Sep 11, 2018

amazingalain commented Dec 16, 2018

parmodkumarr commented Feb 20, 2019

JMIdeaMaker commented Sep 11, 2020

levenokk commented Mar 18, 2021 •

edited

Loading

beingshaif commented Feb 10, 2022

Ajitpatil92002 commented Mar 27, 2022

huunamtn commented Jul 22, 2022 •

edited

Loading

	<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>

fcingolani/index.html

DevKamran commented Jan 31, 2018

mandy6720 commented Feb 8, 2018 • edited Loading

Sreekanthp74 commented Jun 12, 2018

WilsonYesidRiveraCasas commented Aug 2, 2018

The-Don-Himself commented Aug 5, 2018

DevTheUIDeveloper commented Sep 11, 2018

kishandonepudi commented Sep 11, 2018

amazingalain commented Dec 16, 2018

parmodkumarr commented Feb 20, 2019

PDF.js 'Hello, world!' example

JMIdeaMaker commented Sep 11, 2020

levenokk commented Mar 18, 2021 • edited Loading

beingshaif commented Feb 10, 2022

Ajitpatil92002 commented Mar 27, 2022

huunamtn commented Jul 22, 2022 • edited Loading

mandy6720 commented Feb 8, 2018 •

edited

Loading

levenokk commented Mar 18, 2021 •

edited

Loading

huunamtn commented Jul 22, 2022 •

edited

Loading