twitter-bootstrap – PDF.JS如何使pdf-js查看器画布响应？

发布时间：2020-12-17 20:38:55 所属栏目：安全来源：网络整理

导读：我必须在我的页面上使用PDFJS库显示PDF.问题在于,因为我将比例作为固定数量的画布给出,其中呈现的PDF不响应并且不适合引导网格列宽度.这是 HTML代码： div class="row" div class="col-md-1" style="padding-right: 15px;" input type="button" ng-click="op

我必须在我的页面上使用PDFJS库显示PDF.问题在于,因为我将比例作为固定数量的画布给出,其中呈现的PDF不响应并且不适合引导网格列宽度.这是 HTML代码：

<div class="row">
   <div class="col-md-1" style="padding-right: 15px;">
     <input type="button" ng-click="openPreviousPage()"/>
   </div>
   <div class="col-md-8">
     <canvas id="the-canvas" style="border: 1px solid black;"></canvas>
    </div>
    <div class="col-md-1 col-md-offset-2" style="padding-right:15px;">
      <input type="button" ng-click="openNextPage()" />
    </div>
</div>

和我在控制器中的Typescript：

openPage = (pdf: PDFDocumentProxy,pageNumber: number) => {
        pdf.getPage(pageNumber).then(function getPage(page) {
            var scale = 1;
            var viewport = page.getViewport(scale);

            var canvas = <HTMLCanvasElement>document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;


            var renderContext = {
                canvasContext: context,viewport: viewport
            };

            //...rest of actions
        });
    }

对任何暗示都会感激不尽.

解决方法

您可以在canvas容器div上放置一个id,并根据div.clientWidth和viweport.width设置比例.

在您的HTML代码上：

<div class="row">
  <div class="col-md-1" style="padding-right: 15px;">
    <input type="button" ng-click="openPreviousPage()"/>
  </div>
  <div class="col-md-8" id="the-container">
    <canvas id="the-canvas" style="border: 1px solid black;"></canvas>
  </div>
  <div class="col-md-1 col-md-offset-2" style="padding-right:15px;">
    <input type="button" ng-click="openNextPage()" />
  </div>
</div>

然后在控制器上：

openPage = (pdf: PDFDocumentProxy,pageNumber: number) => {
    pdf.getPage(pageNumber).then(function getPage(page) {
        var container = document.getElementById('the-container');
        var canvas = <HTMLCanvasElement>document.getElementById('the-canvas');
        var context = canvas.getContext('2d');

        var viewport = page.getViewport(1);
        var scale = container.clientWidth / viewport.width;
        viewport = page.getViewport(scale);

        canvas.height = viewport.height;
        canvas.width = viewport.width;


        var renderContext = {
            canvasContext: context,viewport: viewport
        };

        //...rest of actions
    });
}

希望这可以帮助…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!