使用PDF.js

Question

我正在使用Angular 5中的PDF.js开发PDFViewer。我在显示Pdf所有页面时遇到问题。

问题描述： 第一页正常，但剩下的页面并排。

问题的屏幕截图：

我试图找出我做错的地方。有什么建议吗？ 在此先感谢!!

这是我的代码：

PDFJS.getDocument(src1).then((_pdfDoc) => {
        this.pdf = _pdfDoc;
        this.totalPages = this.pdf.pdfInfo.numPages;
        let viewer = document.getElementById('viewer');
        for(let page = 1; page <= 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});
});
}

<div id ="viewer" class="pdfViewer"> </div>

更新的问题：

• 问题（即，并排的页面）已被修复 在页面中添加额外的div标签。看看我的代码

PDFJS.getDocument(src1).then((_pdfDoc) => {
        this.pdf = _pdfDoc;
        this.totalPages = this.pdf.pdfInfo.numPages;
        let viewer = document.getElementById('viewer');
            for(let page = 1; page <= 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});
    });
    
 }

<div id ="viewer"  align="center" class="pdfViewer2">        
</div>

• 但是我面临新的问题，即第一页与其他页面没有对齐。首页与剩余页面之间的位置不匹配，其余页面完美无缺。 请看这里。 。

Answer 1

你的JS看起来很好，所以布局可能来自CSS。 .pdf-page-canvas { display: block }应该这样做。