twitter bootstrap - PDF.JS Hvordan gjøre pdf-js visningslærret responsivt?

Jeg må vise PDF ved hjelp av PDFJS-biblioteket på siden min. Problemet er at siden jeg gir skalaen som et fast tall, er ikke lerretet der PDF-en gjengis responsivt og passer ikke til bredden på bootstrap-radkolonnen. Her er HTML-koden:

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

og min Typescript i en kontroller:

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

Ville være takknemlig for et hvilket som helst hint.

Svar #1

Du kan sette en id på canvas-beholderens div og sette skalaen basert på div.clientWidth og viewport.width.

På HTML-koden din:

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

Deretter på kontrolleren:

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

Håper dette hjelper...

Svar #2

For alle som jobber ut fra Acroforms-eksemplet som utgangspunkt, kan det hende du legger merke til at viewport.width ikke samsvarer med det som vises på skjermen når du inspiserer, noe som gjør at løsningen ovenfor gjengir PDF-en større enn ønsket. I mitt tilfelle var viewport.width 612, men ble gjengitt til 816. Jeg fant til slutt ut at dette er et resultat av variabelen CSS_UNITS som ligger inne i pdf_viewer.js. Når jeg først fant det ut, finpusset jeg Google-søket mitt og fant samtalen som diskuterer dens formål:

"I html/css-verdenen er 1 tomme=96 piksler, i PDF er standarden 1 tomme=72 piksler. Skalaen brukes slik at når man viser 100 % en PDF som er 8,5 tommer, skal den vises på skjermen som 8,5 tommer."

For å justere for denne variabelen, som ikke er global, erklærte jeg den bare på nytt lokalt og justerte deretter skalaformelen ovenfor for å inkludere den, slik:

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

Det fungerer bra for meg nå. Håper jeg klarte å spare en av dere litt tid. :)

Skål!

Relaterte artikler