8

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

和我在控制器中的打字稿：

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

将不胜感激任何提示。

4

2 回答 2

17

您可以放置​​一个id画布容器div并根据 和 设置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
    });
}

希望这可以帮助...

于 2016-06-16T22:26:47.527 回答
4

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

“在 html/css 世界中 1 英寸 = 96 像素，在 PDF 中默认值为 1 英寸 = 72 像素。使用比例尺，因此当显示 100% 时，8.5 英寸的 PDF 应在屏幕上显示为 8.5 英寸。”

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

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

现在对我来说效果很好。希望我能够为你们中的一个人节省一些时间。:)

干杯!

于 2018-02-21T16:58:44.710 回答