Skip to main content

​
Install

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

​
Trial License

A trial license key is required to use MuPDF WebViewer. For local development and testing, this license key will also operate for the localhost domain. Visit MuPDF WebViewer to obtain your trial license.

​
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

​
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', 'sample.pdf', {
  libraryPath: 'YOUR_LIBRARY_PATH',
  licenseKey: 'YOUR_LICENSE_KEY',
})
  .then(mupdf => {
    /* API */
    mupdf.toast.show({ type: 'success', content: 'Opened' });
  })
  .catch(err => {
    /* Error handling */
  });

​
Running

You should be able to run on your local machine’s browser. When deploying to the web don’t forget that your license key is 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

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"});
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.
  • As long as your libraryPath is correctly defined in your project before you build it then things should work!
About the libraryPath - 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.
⌘I