title: Getting all the pages at once using PDF.js
body: <p>I'm developing PDFViewer using PDF.js in Angular 5. I'm facing problem while displaying the Pdf all pages at time. </p>
  
  <p><strong>Problem Description</strong>:
  First page is coming normal but remaining pages are coming side by side.</p>
  
  <p><strong>Screenshots of the problem</strong>:<a href="https://i.stack.imgur.com/ikjo0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ikjo0.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/4jFoc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4jFoc.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to figure out that where I'm doing wrong. Any suggestion?
  Thanks in Advance!!</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>PDFJS.getDocument(src1).then((_pdfDoc) =&gt; {
          this.pdf = _pdfDoc;
          this.totalPages = this.pdf.pdfInfo.numPages;
          let viewer = document.getElementById('viewer');
          for(let page = 1; page &lt;= this.totalPages; page++) {
                  let canvas = document.createElement("canvas");    
                  canvas.className = 'pdf-page-canvas';      
                  viewer.appendChild(canvas);    
                  this.renderPage(page, canvas);
           }
  });
  renderPage(pageNumber, canvas) {
      this.pdf.getPage(pageNumber).then(function(page) {
        let viewport = page.getViewport(1);
        canvas.height = viewport.height;
        canvas.width = viewport.width;          
        page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
  });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id ="viewer" class="pdfViewer"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATED QUESTION</strong>:</p>
  
  <ul>
  <li>The Problem (i.e., pages coming side by side) has been fixed by
  adding additional div tag in the page. Have a look at my code</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>PDFJS.getDocument(src1).then((_pdfDoc) =&gt; {
          this.pdf = _pdfDoc;
          this.totalPages = this.pdf.pdfInfo.numPages;
          let viewer = document.getElementById('viewer');
              for(let page = 1; page &lt;= this.totalPages; page++)
              {
                          let childViewer=document.createElement("div");
                          childViewer.className='childviewer';
                          childViewer.align="center";
                          let canvas = document.createElement("canvas");    
                          canvas.className = 'pdf-page-canvas'; 
                          childViewer.appendChild(canvas);
                          viewer.appendChild(childViewer);    
                          this.renderPage(page, canvas);
              }
    });
   renderPage(pageNumber, canvas) {
          this.pdf.getPage(pageNumber).then(function(page) {
            let viewport = page.getViewport(1);
            canvas.height = viewport.height;
            canvas.width = viewport.width;              
            page.render({canvasContext: canvas.getContext('2d'), viewport:    viewport});
      });
      
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id ="viewer"  align="center" class="pdfViewer2"&gt;        
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>But I'm facing new issue i.e., First page is not aligned with rest of the pages.There is a small position mismatch between first page and remaining pages and rest of the pages are coming perfectly.
  Please have a look here.
  . <a href="https://i.stack.imgur.com/SwA82.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwA82.png" alt="enter image description here"></a></li>
  </ul>