DjVu.js - Open and view DjVu online
Русский English
DjVu.js program library

Downloads

Here you can download the library and the viewer .js and .css files.

Download DjVu.js library (version 0.5.4)

Download DjVu.js Viewer (version 0.10.0)

Note that since the version 0.5.0 all viewer's CSS is inside the js file. So no separate djvu_viewer.css is provided.

You can downloadthe previous versions here.

How to use it

Create a folder with files that you downloaded from here (djvu.js, djvu_viewer.js). Then in the same folder create an .html file (let's say index.html) with the following content.

<!DOCTYPE html>
<html>

<header>
    <meta charset="utf-8">
    <script src="djvu.js"></script>
    <script src="djvu_viewer.js"></script>

    <style>
        #for_viewer {
            height: 80vh;
            width: 90vw;
            margin: 5vh auto;
            border: 1px solid black;
        }
    </style>

    <script>
        window.onload = function() {
            // save as a global value
            window.ViewerInstance = new DjVu.Viewer();
            // render into the element
            window.ViewerInstance.render(
                document.querySelector("#for_viewer")
            );
        };
    </script>

</header>

<body>
    <div id="for_viewer"></div>
</body>

</html>

If you use Mozilla Firefox web browser, then you can just open the index.html and you will see the DjVu.js viewer, which will work absolutely the same way as it does on the main page of this website. But if you use Google Chrome or Opera, you won't see anything except for some errors in the console. It's concerned with that the DjVu.js uses the Web Workers API of the web browsers and Chrome doesn't allow the script to create a Worker, when the file is loaded from the file system directly. In other words, you just need to start a local web server in order to make everything work as it works on the Internet. Any static web server will do.

For example, if you have Node.js installed, you can just use the serve package to run a simple static web server. Run the following commands in your shell.

npm install -g serve

to install the serve package globally and then head to the directory, where our files are kept, and run

serve -p 5000

in order to start the local server (you may change the port as you wish). Then just open http://localhost:5000/ and you will see the viewer.

Programmatic API

Furthermore, the viewer has an API, which allows to open djvu files programmatically:

The config is an object containing options for the viewer. It's an optional parameter. It has the following shape:

// any of the parameters may be omitted, use only those you need
viewer.configure({
  name: "MyDjVuDocument.djvu",
  viewMode: 'continuous',
  pageNumber: 10,
  pageRotation: 90,
  pageScale: 2,
  language: 'ru',
  theme: 'dark',
  djvuOptions: {
    baseUrl: "/url/to/directory/with/indirect/djvu/"
  },
  uiOptions: {
    hideFullPageSwitch: true,
    changePageOnScroll: false,
    showContentsAutomatically: false,
    onSaveNotification: {
      text: "Here is your notification/agreement for the user",
      yesButton: "Text on the yes button",
      // optional
      noButton: "Text on the no button",
      // optional
    },
    hideOpenAndCloseButtons: false,
    hidePrintButton: true,
    hideSaveButton: false,
  },
})

There are several static methods and properties:

Escape hatch API

Also, there is a so-called "escape hatch" API, namely:

DjVu.Viewer.Constants, DjVu.Viewer.ActionTypes, DjVu.Viewer.get (all Redux selectors), and viewerInstance.store - Redux store with getState() and dispatch() methods. These values are exposed to allow quick temporary solutions, if the stable programmatic API isn't enough. If you know Redux architecture and have studied the source code, you will be able to call any action programmatically without changing the source code. However, it's strongly recommended creating a feature request if the current API isn't enough, because "escape hatch" API changes often during the development.

More examples

If you want to load file, select the page number and keep track of what page is currently open, you can do the following:

async function loadDocument() {
  const viewer = new DjVu.Viewer();
  viewer.render(document.getElementById('for_viewer'));
  await viewer.loadDocumentByUrl('assets/my-djvu-file.djvu');

  viewer.configure({ // you also can pass the same object as a second parameter to .loadDocumentByUrl()
    pageNumber: 10,
  });

  viewer.on(Djvu.Viewer.Events.PAGE_NUMBER_CHANGED, () => { // no args are passed here
    console.log('Page number changed to', viewer.getPageNumber());
  })
}

Also you can load the file by your own (as an ArrayBuffer) and then use the loadDocument method. However, in case of the loadDocumentByUrl you will see the progress bar of loading, if your file is rather big.

You can create several links to djvu files and open them in the viewer, when a user clicks on them. Here is the complete example:

<!DOCTYPE html>
<html>

<header>
    <meta charset="utf-8">
    <script id="djvu_js_lib" src="djvu.js"></script>
    <script src="djvu_viewer.js"></script>
    <script src="reloader.js"></script>

    <script>
        window.onload = function() {
            // save as a global value
            window.ViewerInstance = new DjVu.Viewer();
            // render into the element
            window.ViewerInstance.render(
                document.querySelector("#for_viewer")
            );

            // get all special links
            document.querySelectorAll('a.djvu').forEach(link => {
                link.addEventListener('click', e => {
                    // we don't want to download the file
                    e.preventDefault();
                    // open the file in the viewer by its url
                    ViewerInstance.loadDocumentByUrl(link.href);
                });
            });
        };
    </script>

    <style>
        /* make it pretty-looking */

        body {
            height: 100vh;
            margin: 0;
        }

        #for_viewer {
            height: 80vh;
            width: 90vw;
            margin: 5vh auto;
            border: 1px solid black;
        }

        a.djvu {
            display: inline-block;
            margin: 2vh 2vw;
            border: 1px solid gray;
            text-decoration: none;
            color: inherit;
            padding: 1vh 1vw;
            border-radius: 0.5em;
        }

        a.djvu:hover {
            background: lightgray;
        }
    </style>

</header>

<body>
    <a href="DjVu3Spec.djvu" class="djvu">Open DjVu3Spec.djvu</a>
    <a href="colorbook.djvu" class="djvu">Open colorbook.djvu</a>
    <div id="for_viewer"></div>
</body>

</html>

The same technique is used on the main page of this website. You can open both DjVu3Spec.djvu and colorbook.djvu in the viewer on the main page, then save them through the viewer (Ctrl+S) and run the example posted above. Note that you have to run a local server to make everything work.