Open a Document

ComPDF supports opening PDF documents of various data types, including URL, File, Blob, ArrayBuffer, and Base64 types. Pass the document with initialDoc when creating the viewer, or load it later with instance.UI.loadDocument(). Base64 data is passed as a data:application/pdf;base64,... URL.

This example shows how to open a document:

URL

// Import the JS file of ComPDFKit Web.
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'https://www.example.com/test.pdf',
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { documentViewer } = instance.Core;
    const { UI } = instance;
    documentViewer.addEventListener('documentLoaded', async () => {
      console.log('Document Loaded');
    })

    UI.loadDocument('https://www.example.com/test.pdf')
  });

Blob

// Import the JS file of ComPDFKit Web.
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: blobData,
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { documentViewer } = instance.Core;
    const { UI } = instance;
    documentViewer.addEventListener('documentLoaded', async () => {
      console.log('Document Loaded');
    })

    UI.loadDocument(blobData, {
      filename: 'test.pdf'
    })
  });

ArrayBuffer

// Import the JS file of ComPDFKit Web.
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: buffer,
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { documentViewer } = instance.Core;
    const { UI } = instance;
    documentViewer.addEventListener('documentLoaded', async () => {
      console.log('Document Loaded');
    })

    UI.loadDocument(buffer, {
      filename: 'test.pdf'
    })
  });

Base64

// Import the JS file of ComPDFKit Web.
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: `data:application/pdf;base64,${base64Data}`,
  licenseKey: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { documentViewer } = instance.Core;
    const { UI } = instance;
    documentViewer.addEventListener('documentLoaded', async () => {
      console.log('Document Loaded');
    })

    UI.loadDocument(`data:application/pdf;base64,${base64Data}`, {
      filename: 'test.pdf'
    })
  });