Twitter bootstrap 如何使PDF JS查看器画布响应？

我必须在我的页面上使用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>

<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 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
        });
    }

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
    });
}

openPage=（pdf:PDFDocumentProxy，页码：number）=>{
getPage（页码）。然后（函数getPage（页码）{
var量表=1；
var viewport=page.getViewport（比例）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
//……其余行动
});
}

---

非常感谢您的提示。

您可以在画布容器

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

<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 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
        });
    }

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
    });
}

openPage=（pdf:PDFDocumentProxy，页码：number）=>{
getPage（页码）。然后（函数getPage（页码）{
var container=document.getElementById（'the-container'）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
var viewport=page.getViewport（1）；
var scale=container.clientWidth/viewport.width；
viewport=page.getViewport（比例）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
//……其余行动
});
}

---

希望这有助于…

对于以Acroforms示例为起点的任何人，您可能会注意到viewport.width与检查时屏幕上呈现的内容不匹配，这使得上述解决方案呈现的PDF比所需的大。在我的例子中，viewport.width为612，但渲染为816。我最终发现这是pdf_viewer.js中的CSS_UNITS变量的结果。一旦我明白了这一点，我就在谷歌搜索中找到了讨论其目的的对话：

为了调整这个非全局变量，我只是在局部再次声明它，然后调整上面的比例公式以包含它，如下所示：

    'use strict';

    PDFJS.workerSrc = '/assets/plugins/PDFjs/web/test/pdf.worker.js';

    var DEFAULT_URL = '/assets/plugins/PDFjs/web/test/form.pdf';
    var DEFAULT_SCALE = 1.0;
    var CSS_UNITS = 96/72;
    var container = document.getElementById('pageContainer');

    // Fetch the PDF document from the URL using promises.
    PDFJS.getDocument(DEFAULT_URL).then(function (doc) {

      // Use a promise to fetch and render the next page.
      var promise = Promise.resolve();
      for (var i = 1; i <= doc.numPages; i++) {
          promise = promise.then(function (pageNum) {
            return doc.getPage(pageNum).then(function (pdfPage) {

                var viewport = pdfPage.getViewport(DEFAULT_SCALE);
                var scale = container.clientWidth / (viewport.width * CSS_UNITS);

                // Create the page view.
                var pdfPageView = new PDFJS.PDFPageView({
                  container: container,
                  id: pageNum,
                  scale: scale,
                  defaultViewport: pdfPage.getViewport(scale),
                  annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory(),
                  renderInteractiveForms: true,
                });

            // Associate the actual page with the view and draw it.
            pdfPageView.setPdfPage(pdfPage);
            return pdfPageView.draw();
          });
        }.bind(null, i));
      }
    });

“严格使用”；
PDFJS.workerSrc='/assets/plugins/PDFJS/web/test/pdf.worker.js'；
var DEFAULT_URL='/assets/plugins/PDFjs/web/test/form.pdf'；
var默认值_标度=1.0；
var CSS_单位=96/72；
var container=document.getElementById（'pageContainer'）；
//使用承诺从URL获取PDF文档。
getDocument（默认的URL）。然后（函数（doc）{
//使用承诺获取并呈现下一页。
var promise=promise.resolve（）；
对于（var i=1；我需要帮助将pdf缩放为150%和200%，因此我将150%和200%的默认比例更改为1.5和2.0，这实际上减小了pdf的大小，因为viewport.width随默认比例值而增大，这会由于公式var SCALE=container.clientWidth/而导致比例减小（viewport.width*CSS_单位）；请建议将pdf缩放150%的解决方案，200%的默认比例值是否大于1？