Skip to main content

​
Install

Grab the package on NPM with: 
npm install mupdf-webviewer

​
Prepare your DOM

Ensure that your HTML page where you want to use MuPDF WebViewer has a dedicated DOM node available with the id you require, e.g. 
<div id="viewer"></div>

​
Initialization

Once ready you should initialize with initMuPDFWebViewer(). Example 
import { initMuPDFWebViewer } from 'mupdf-webviewer'

initMuPDFWebViewer('#viewer', 
                   'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', {
})
.then(mupdf => {
    /* API */
    mupdf.toast.show({ type: 'success', content: 'Opened' });
})
    .catch(err => {
    /* Error handling */
});
File paths to PDFs should be absolute paths.

​
Optionally set the library path

The main JavaScript viewer libraries will be served from CDN by default, however you can choose to self-host these files by setting the libraryPath option during initialization. One of the benefits of self-hosting is that you can reference the files with relative paths from your own domain.

​
Copy the library assets

The library folder for MuPDF WebViewer is required to be copied to a library path of your choosing. 
cp -r node_modules/mupdf-webviewer/lib/* {YOUR_LIBRARY_PATH}/
For example in a React environment you probably want to just make this available in the public folder as follows: 
cp -r ./node_modules/mupdf-webviewer/lib ./public

​
Set the library path during initialization

Then set the libraryPath option during initialization to point to your chosen path. Example 
import { initMuPDFWebViewer } from 'mupdf-webviewer'

initMuPDFWebViewer('#viewer', 'sample.pdf', {
  libraryPath: 'lib',
})  
  .then(mupdf => {
    /* API */
    mupdf.toast.show({ type: 'success', content: 'Opened' });
  })
  .catch(err => {
    /* Error handling */
  });
In the case above our library path is simply “lib”.
File paths to PDFs can be relative or absolute paths if you are self-hosting the library files.

​
Running

You should be able to run on your local machine’s browser. The following local domains work out of the box:
  • localhost
  • 127.0.0.1
  • *.test

​
Trial License

For local development a license key is not required, however for deployment to production, a license key is required to use MuPDF WebViewer. Visit MuPDF WebViewer to obtain your trial license. Use the licenseKey option during initialization to set your license key. Example 
import { initMuPDFWebViewer } from 'mupdf-webviewer'

initMuPDFWebViewer('#viewer', 
                   'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', {
                   licenseKey: 'YOUR_LICENSE_KEY',
})
.then(mupdf => {
    /* API */
    mupdf.toast.show({ type: 'success', content: 'Opened' });
})
    .catch(err => {
    /* Error handling */
});
When deploying to the web don’t forget that a license key is required & specific to the domain you registered the key against.

​
Opening Files

You can open local and remote files with MuPDF Webviewer. You can also open files as blob URLs if required.

​
Local files

Depending on your integration you can open local files with absolute or relative paths, as follows:

​
Absolute paths

Supply the absolute path to your file as follows: Example 
mupdf.document.open({url:"http://localhost:5173/public/hello-world.pdf", filename:"My File"});

​
Relative paths

Supply the relative path to your file as follows: Example 
mupdf.document.open({url:"../../path/to/my/file.pdf", filename:"My File"});

​
Remote files

Supply the URL to your file as follows: Example 
mupdf.document.open({url:"https://example.com/my-file.pdf", filename:"My File"});
Remote PDF files shuold ensure to have the correct CORS permissions set. See the warning in the API docs for document.open and remote files.

​
Loading Files as Blob URLS

If you want to use blob URLs, then MuPDF WebViewer can use that for the file data. The example below converts a PDF into a blob URL then opens it: Example 
async function openWithBlobURL(url, filename = 'My File') {
    const response = await fetch(url);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    mupdf.document.open({url:blobUrl, filename:filename});
}

openWithBlobURL('/file.pdf')

​
Deploying with React

Deployment for a typical React or NextJS project should follow the following steps:
  • npm run build
  • A folder called dist will be created with the following structure:
    • assets folder
    • index.html
    • lib folder
  • Edit the index.html file to use the relative path for assets to load the JS and CSS files , i.e. assets not /assets, this ensures that the deployed code will not search the root of your web server for the “assets” folder.
    assets/index- not /assets/index- !
  • Rename and upload the “dist” folder to the location on your server where you want to serve the project, for example if your project is served on https://website.com/webviewer/ then rename the “dist” folder to “webviewer” before you upload it.
The main JavaScript libraries will be served from CDN by default, this only applies if you wish to self-host the library files - i.e. you have defined the libraryPath parameter during initialization.MuPDF WebViewer code seeks from the root of your server. So if you deploy to e.g. https://website.com/webviewer/ then your libraryPath should be defined as “webviewer/lib”.If you want to change the name of the lib folder then you should rename it in your “dist” folder after npm run build.e.g. If you define your libraryPath as “webviewer/mupdf-lib” then rename “dist/lib” to “webviewer/mupdf-lib” after build time.
See the Sample Projects for more.