<!DOCTYPE html>
<html>
<head>
<title>MuPDF / WebAssembly</title>
<meta charset="utf-8">
<style>
pre,dl{margin-left:2em;}
dt{margin-top:0.5em;font-family:monospace}
</style>
</head>
<body>
<h1>MuPDF WebAssembly</h1>
<h2>Building</h2>
<p>
The WebAssembly build has only been tested on Linux at the moment.
If you use any other platform, you are on your own.
<p>
In order to build this you will need to install the
<a href="https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Emscripten SDK</a>
in <tt>/opt/emsdk</tt>.
If you install it elsewhere, you will need to edit the platform/wasm/build.sh
script to point to the appropriate location.
<p>
From the MuPDF project, you can run <tt>make wasm</tt> to build the WebAssembly
library. The results of the build are a libmupdf.wasm binary and
libmupdf.js script, placed in platform/wasm/.
<p>
In order to build a web application based on MuPDF, you will need to copy
these two files and make them available to your page.
<p>
The libmupdf.wasm binary is quite large, because it contains not only the MuPDF
library code, but also the 14 core PDF fonts, various CJK mapping resources,
and ICC profiles. In order to keep it as small as possible, it is built with a
minimal features set that does not include CJK fonts, EPUB support, etc.
<h2>Using</h2>
<p>
The example script in platform/wasm/view.html shows how to use the
MuPDF WebAssembly library.
<p>
The first part is including the libmupdf.js script, which pulls in
and instantiates the WebAssembly module:
<pre>
<script src="libmupdf.js"></script>
</pre>
<p>
MuPDF uses the Emscripten virtual file system to load a document, so you will
need to seed it with the file you want to view in a Module.preRun
callback function:
<pre>
<script>
Module.preRun = function () {
FS.createPreloadedFile(".", "input.pdf", "input.pdf", true, false);
}
</script>
</pre>
<p>
When the filesystem has finished preloading the file data and initialized the
code, it will call the Module.postRun callback. From here, you can
use the 'mupdf' object to call various functions to open the document and
render pages into various formats.
<dl>
<dt>mupdf.openDocument(filename)
<dd>Open a document and return a handle.
<dt>mupdf.freeDocument(doc)
<dd>Free a document and its associated resources.
<dt>mupdf.documentTitle(doc)
<dd>Return the document title as a string.
<dt>mupdf.documentOutline(doc)
<dd>Return a DOM element containing the table of contents formatted as
an unordered HTML list with links to pages using anchor fragments "#page%d".
<dt>mupdf.countPages(doc)
<dd>Return the number of pages in the document.
<dt>mupdf.pageWidth(doc, page, dpi) and mupdf.pageHeight(doc, page, dpi)
<dd>Return the dimensions of a page. Page numbering starts at 1.
<dt>mupdf.drawPageAsPNG(doc, page, dpi)
<dd>Render the page and return a PNG image formatted as a data URI,
suitable for using as an image source attribute.
<dt>mupdf.pageLinks(doc, page, dpi)
<dd>Retrieve an HTML string describing the links on a page,
suitable for including as the innerHTML of an image map.
<dt>mupdf.drawPageAsSVG(doc, page)
<dd>Return a string with the contents of the page in SVG format.
<dt>mupdf.drawPageAsHTML(doc, page)
<dd>Return a string with the contents of the page in HTML format,
using absolute positioned elements.
</dl>
<h2>Example</h2>
<p>
Here is a very simple example of loading a document and drawing its first page:
<pre>
<!DOCTYPE html>
<html>
<head>
<script src="libmupdf.js"></script>
<script>
Module.preRun = function () {
FS.createPreloadedFile(".", "input.pdf", "input.pdf", true, false);
}
Module.postRun = function () {
var DPI = 96;
var doc = mupdf.openDocument("input.pdf");
var img = document.getElementById("page1");
img.src = mupdf.drawPageAsPNG(doc, 1, DPI);
var map = document.getElementById("page1map");
map.innerHTML = mupdf.pageLinks(doc, 1, DPI);
}
</script>
</head>
<body>
<img id="page1" usemap="#page1map">
<map id="page1map" name="page1map"></map>
</body>
</html>
</pre>
</body>
</html>
98d9d7be17