Creating a Responsive Canvas for PDF.JS Viewer

Question

Creating a Responsive Canvas for PDF.JS Viewer

I am facing an issue with displaying a PDF using the PDFJS library on my page. The fixed scale that I have set is causing the canvas, where the PDF is rendered, to not be responsive and fit within the bootstrap grid column width. Below is the HTML code snippet:

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

Here is the TypeScript code snippet used in the controller:

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

            //...further actions
        });
    }

If anyone has any suggestions or hints on how to resolve this issue, it would be highly appreciated.

twitter-bootstrap typescript pdf.js

Answer 1

Answer №1

To easily customize the size of the canvas, assign an id to the container div and adjust the scale according to div.clientWidth and viewport.width.

In your HTML markup:

<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="canvas-container">
    <canvas id="main-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>

Then in the controller code:

loadPage = (pdf: PDFDocumentProxy, pageNumber: number) => {
    pdf.getPage(pageNumber).then(function onPageLoad(page) {
        var container = document.getElementById('canvas-container');
        var canvas = <HTMLCanvasElement>document.getElementById('main-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
        };

        // Perform additional actions here...
    });
}

This approach should simplify the customization process.

Answer 2

To easily customize the size of the canvas, assign an id to the container div and adjust the scale according to div.clientWidth and viewport.width.

In your HTML markup:

<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="canvas-container">
    <canvas id="main-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>

Then in the controller code:

loadPage = (pdf: PDFDocumentProxy, pageNumber: number) => {
    pdf.getPage(pageNumber).then(function onPageLoad(page) {
        var container = document.getElementById('canvas-container');
        var canvas = <HTMLCanvasElement>document.getElementById('main-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
        };

        // Perform additional actions here...
    });
}

This approach should simplify the customization process.

Answer 3

Answer №2

If you are starting with the Acroforms example, you may have noticed that the viewport.width does not match what is being displayed on the screen when inspected. This discrepancy can lead to the PDF rendering larger than desired. In my case, the viewport.width was 612, but it was rendering to 816. I discovered that this issue stems from the CSS_UNITS variable within pdf_viewer.js. After researching further, I came across a discussion explaining its purpose:

"In the html/css world, 1in = 96pixels, whereas in PDF default, 1in = 72pixels. The scale is adjusted so a PDF of 8.5in should display as 8.5in on the screen at 100%."

To account for this variable, which is not global, I re-declared it locally and modified the scaling formula accordingly, as shown below:

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

This adjustment has resolved the sizing discrepancy for me. I hope sharing this information saves others time in troubleshooting similar issues. :)

Cheers!

Answer 4

If you are starting with the Acroforms example, you may have noticed that the viewport.width does not match what is being displayed on the screen when inspected. This discrepancy can lead to the PDF rendering larger than desired. In my case, the viewport.width was 612, but it was rendering to 816. I discovered that this issue stems from the CSS_UNITS variable within pdf_viewer.js. After researching further, I came across a discussion explaining its purpose:

"In the html/css world, 1in = 96pixels, whereas in PDF default, 1in = 72pixels. The scale is adjusted so a PDF of 8.5in should display as 8.5in on the screen at 100%."

To account for this variable, which is not global, I re-declared it locally and modified the scaling formula accordingly, as shown below:

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

This adjustment has resolved the sizing discrepancy for me. I hope sharing this information saves others time in troubleshooting similar issues. :)

Cheers!

Answer 5

Answer №3

To make your canvas responsive, utilize bootstrap and include the class = "img-fluid".

<div class="container" id="the-container">
    <canvas id="the-canvas" class="img-fluid" style="border: 1px solid black;"></canvas>
  </div>

Answer 6

To make your canvas responsive, utilize bootstrap and include the class = "img-fluid".

<div class="container" id="the-container">
    <canvas id="the-canvas" class="img-fluid" style="border: 1px solid black;"></canvas>
  </div>

Creating a Responsive Canvas for PDF.JS Viewer

Answer №1

Answer №2

Answer №3

Similar questions

When resizing the screen, the contents of the Bootstrap 3 navbar disappear instead of collapsing as intended

Guide to waiting for API responses with redux-saga

Combining the power of Visual Studio Code with NodeJs allows for seamless detection of missing package namespaces

Exploring the Possibilities of OpenLayers with Scalable Vector

Creating a randomly generated array within a Reactjs application

Encountering an error stating "Module 'custom-module' not found, along with its type declarations" when attempting to add a module from GitHub

Is it possible to deduce the types of a particular value based on an interface that is provided as a generic parameter?

The attribute 'data' is not found within the type 'Promise<void | AxiosResponse>'

leveraging the useReducer hook with the possibility of dispatching actions

Broadening Cypress.config by incorporating custom attributes using Typescript

The NullInjectorError has occurred due to the absence of a provider for the InjectionToken angularfire2.app

An issue has arisen with AngularJS and Twitter Bootstrap, displaying an error message stating that the function element.focus

The style fails to load correctly upon the page's initial loading

I am encountering an issue when sending data using queryParams. It seems to work fine when I pass a string or number

Checking the interceptor response in NestJs testing

Creating a TypeScript function that automatically infers the type of the returned function using generics

Searching for similar but not identical results using Knex.js

Setting up ESLint for TypeScript with JSX configuration

What benefits does redux-thunk offer?

Generating a collection of objects containing a variable number of attributes