This guide explains how to use the PDF Web Viewer in an HTML application.
The simplest way to integrate the PDF Web Viewer is to use it directly in an HTML file.
First, you need to copy the required asset folders from the package to your project's root directory (next to your index.html).
Copy these folders from node_modules/@avanquest/pdf-web-viewer/public/:
pwv-workers/ -> Copy to ./pwv-workers/pwv-fonts/ -> Copy to ./pwv-fonts/pwv-i18n/ -> Copy to ./pwv-i18n/pwv-stamps/ -> Copy to ./pwv-stamps/Your project structure should look like this:
/my-project
/node_modules
/pwv-fonts
/pwv-workers
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web PDF Viewer</title>
<style>
#pdf-container {
width: 100%;
height: 100vh;
/* The container must have a fixed size */
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<script type="module">
import { PdfEditor } from './node_modules/@avanquest/pdf-web-viewer/ui/index.js';
/* Initialize the PDF viewer */
/* Assets (workerPath, fontsPath) are auto-detected from ./public ./pwv-workers and ./pwv-fonts */
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY' /* Replace with your license key */,
container: document.getElementById('pdf-container') /* Specify the container element */,
});
/* To open a document programmatically: */
/* const file = new File([arrayBuffer], 'document.pdf', { type: 'application/pdf' }); */
/* await editor.ui.pdfWebService.openDocument(file); */
/* Or use SDK: await editor.sdk.openDocument({ file }); */
</script>
</body>
</html>
For a more modern development experience, you can use Vite to build your HTML application:
# Create a new Vite project
npm create vite@latest pdf-viewer-app -- --template vanilla
# Navigate to the project directory
cd pdf-viewer-app
# Install dependencies
npm install
# Install PDF Web Viewer and RxJS
npm install @avanquest/pdf-web-viewer rxjs
# Install fs-extra for the asset copying
npm install fs-extra --save-dev
Create or modify vite.config.js:
import { defineConfig } from 'vite';
import { resolve } from 'path';
import fs from 'fs-extra';
/* Function to copy assets during build */
const copyPdfViewerAssets = () => {
return {
name: 'copy-pdf-viewer-assets',
buildStart() {
/* This runs when the dev server starts or before build */
const sourceBase = resolve('node_modules/@avanquest/pdf-web-viewer/public');
const targetBase = resolve('public');
if (fs.existsSync(sourceBase)) {
fs.ensureDirSync(targetBase);
/* Copy required asset folders */
['pwv-workers', 'pwv-fonts', 'pwv-i18n', 'pwv-stamps'].forEach((folder) => {
const src = resolve(sourceBase, folder);
const dest = resolve(targetBase, folder);
if (fs.existsSync(src)) {
fs.copySync(src, dest);
console.log(`Copied ${folder} to public/${folder}`);
}
});
} else {
console.warn('PDF Viewer assets directory not found!');
}
},
};
};
export default defineConfig({
plugins: [copyPdfViewerAssets()],
server: {
/* Serve static assets from public directory */
publicDir: 'public',
},
});
import './style.css';
import { PdfEditor } from '@avanquest/pdf-web-viewer';
document.querySelector('#app').innerHTML = `
<div id="pdf-container" style="width: 100%; height: 100vh;"></div>
`;
/* Add styles for the viewer wrapper and app container */
const style = document.createElement('style');
style.textContent = `
body {
margin: 0;
padding: 0;
}
#app {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
max-width: none; /* Override Vite default */
}
document-viewer-wrapper {
display: block;
width: 100%;
height: 100%;
}
`;
document.head.appendChild(style);
/* Initialize the PDF viewer */
const editor = await PdfEditor({
license: 'YOUR_LICENSE_KEY' /* Replace with your license key */,
container: document.getElementById('pdf-container'),
});
npm run dev
Open your browser at the URL displayed in the terminal (usually http://localhost:5173).
When deploying your HTML application with PDF Web Viewer:
workerPath configuration points to the correct location