使用 PDF.js 一次获取所有页面答案

【问题标题】：Getting all the pages at once using PDF.js使用 PDF.js 一次获取所有页面
【发布时间】：2018-09-21 07:43:06
【问题描述】：

我正在使用 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});
});
}

&lt;div id ="viewer" class="pdfViewer"&gt; &lt;/div&gt;

更新问题：

问题（即页面并排出现）已由在页面中添加额外的 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>

但我遇到了新问题，即首页与其余页面不对齐。首页与其余页面之间存在少量位置不匹配，其余页面完美呈现。请看这里。 .

【问题讨论】：

并排的页面是一个<canvas>还是两个？
嗨@BenWest，对不起，我没有正确理解你的问题。两个

标签： javascript html angular typescript pdfjs

【解决方案1】：

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

【讨论】：

嗨@BenWest，我也试过这个CSS代码。但这并没有解决问题。当我最小化窗口时它正在工作，但如果我最大化窗口，那么它又是同样的问题。
@RaviKumarB <canvas>es 应用了哪些 CSS 样式？
嗨@BenWest，请查看更新后的问题。我遇到了新问题。
@RaviKumarB 仍然需要查看您的 CSS。如果没有样式应用于您的 <canvas> 元素，它们会像您希望的那样堆叠 - 因此必须有样式使它们的布局不同。