Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic import of pdfjsViewer with typescript #12030

Closed
coler-j opened this issue Jun 26, 2020 · 3 comments
Closed

Basic import of pdfjsViewer with typescript #12030

coler-j opened this issue Jun 26, 2020 · 3 comments

Comments

@coler-j
Copy link

coler-j commented Jun 26, 2020

How do you do it? Seems like the @types are significantly messed up, this library is very difficult to use.

import * as pdfjsViewer from ' ...............' ?
@Snuffleupagus
Copy link
Collaborator

This library doesn't have any (official) TypeScript definitions; that's tracked in issue #7909.

@coler-j
Copy link
Author

coler-j commented Jun 26, 2020

Do I need to do something special to be able to use this library?

I installed pdfjs-dist from npm
I am using parcel-bundler to bundle my files

I have an html file like this:

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">

    <title>Example</title>

    <link rel="stylesheet" href="../node_modules/pdfjs-dist/web/pdf_viewer.css">

    <script src="../node_modules/pdfjs-dist/build/pdf.js"></script>
    <script src="../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .page {
      position: relative;
    }
    </style>
  </head>

  <body>
    <div id="pageContainer"></div>
    <script src="./form.js"></script>
  </body>
</html>

And a form.js like this

"use strict";

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "../node_modules/pdfjs-dist/build/pdf.worker.js";

var DEFAULT_URL = '/pdfs/fw4.pdf';
var DEFAULT_SCALE = 1.0;

var container = document.getElementById("pageContainer");

var eventBus = new pdfjsViewer.EventBus();

// Fetch the PDF document from the URL using promises.
var loadingTask = pdfjsLib.getDocument(DEFAULT_URL);
loadingTask.promise.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) {
          // Create the page view.
          var pdfPageView = new pdfjsViewer.PDFPageView({
            container: container,
            id: pageNum,
            scale: DEFAULT_SCALE,
            defaultViewport: pdfPage.getViewport({ scale: DEFAULT_SCALE }),
            eventBus: eventBus,
            annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory(),
            renderInteractiveForms: true,
          });

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

I just get ReferenceError: pdfjsLib is not defined. It is like pdfjsLib is not in global / window scope.
Following some other tickets in the issues here (#10283), if I var pdfjsLib = require("pdfjs-dist"); then I get error pdfjsViewer is not defined.

But there does not seem to be an accessible import for pdfjsViewer nor for the EventBus constructor.

@coler-j coler-j closed this as completed Jun 26, 2020
@koogle
Copy link

koogle commented May 12, 2023

I think you are looking for

import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Snuffleupagus @koogle @coler-j