Open a Document

ComPDF supports opening PDF documents of various data types, including URL, File, Blob, ArrayBuffer, and Base64 types.

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.init({
  path: '/',
  pdfUrl: 'https://www.example.com/test.pdf',
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    const UI = core.UI;
    docViewer.addEvent('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.init({
  path: '/',
  pdfUrl: blobData,
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    const UI = core.UI;
    docViewer.addEvent('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.init({
  path: '/',
  pdfUrl: buffer,
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    const UI = core.UI;
    docViewer.addEvent('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.init({
  path: '/',
  pdfUrl: base64Data,
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    const UI = core.UI;
    docViewer.addEvent('documentloaded',async () => {
      console.log('Document Loaded');
    })

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