Getting Started#

Fundamentally you can try MuPDF.js in two ways:

Getting Started with NPM & Node#

Note

This assumes you have Node JS & NPM installed on your system and have a basic knowledge of it!

1. NPM Install#

From the command line, go to the project folder you want to work from and install via NPM as follows:

npm install mupdf

This will then install the dependency you need to work with MuPDF.js in your package.json file.

2. Create a Test File#

To verify your installation you can create a file, e.g. test.mjs with the following script:

import * as mupdfjs from "mupdf/mupdfjs"
console.log(mupdfjs)

3. Run the Test#

Then, on the command line for the project folder, run the test script with node:

node test.mjs

This will print the mupdfjs object to the output - you are now ready to use it!



Getting Started with the Repository Source Code Files#

Note

This assumes you have Git & Python installed on your system and have a basic knowledge of it!

1. Checkout the Repository#

Check out the MuPDF.js repository on Github as follows:

git clone git@github.com:ArtifexSoftware/mupdf.js.git

2. Initialize the Submodules#

git submodule update --init --recursive

This will then create the libmupdf folder which is required to build the MuPDF libraries.

3. Build the MuPDF libraries#

Note

Check the BUILDING.md file for full details!

On the root of your checkout run:

make

This will then create the dist folder with the required Wasm library and associated TypeScript & JavaScript files.

4. Create a Simple HTML & JS Test Files#

Just to try things out we can create a couple of test files to see if we can see the mupdfjs object in the browser.

  • Create a file called test.html and populate it as follows:

<html>
    <script>
        const worker = new Worker("worker.js", { type: "module" });
    </script>
</html>

  • Create a file called worker.js and populate it as follows:

"use strict"

import * as mupdfjs from "../../dist/mupdfjs.js"

for (var i in mupdfjs) {
    console.log(`mupdfjs=${mupdfjs[i]}`)
}

Ensure to save the files in the root of the your git checkout so the library files can be accessed.

5. Start a Server with Python#

Because we are relying on web workers to run local JavaScript files we need to run the test.html in a server context.

Start a local server with Python as follows:

python -m http.server

6. Open the HTML Test File#

Finally, open in a browser with the following URL:

http://localhost:8000/test.html

Inspect the console log in your browser and you should see the internals of the MuPDF object printed out - you are now ready to use it!