Open and display PDF files from a remote URL using JavaScript

PDF

To load a document from a remote URL in standalone mode, pass it in the configuration object passed to NutrientViewer.load():

// Standalone mode: loads document from remote URL
NutrientViewer.load({
  container: "#pspdfkit",
  document: documentUrl
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });

Note: For better error handling, fetch the document yourself and pass the ArrayBuffer instead of the URL directly. This enables you to validate the response before loading. Otherwise, invalid responses will produce a generic "File not a PDF or corrupted" error.

Accessing an authenticated document

However, sometimes you want to restrict access to your documents so they’re not publicly available on the internet. One common way to achieve this is with HTTP Basic authentication(opens in a new tab).

If you try to load a document from a URL that’s protected by HTTP basic authentication, Nutrient Web SDK will ask you for a username and password. To avoid entering these, you can fetch the document yourself, passing the credentials as an Authorization header. Once you’ve received the response, you can pass it to the NutrientViewer.load() method as an ArrayBuffer:

// Standalone mode: loads HTTP Basic authenticated document
async function loadProtectedPDF(documentUrl, username, password) {
  // Base64-encode your credentials and set them as an `Authorization` header.
  const headers = new Headers();
  const encodedCredentials = btoa(`${username}:${password}`);
  headers.set("Authorization", `Basic ${encodedCredentials}`);


  try {
    // Fetch the PDF and read the response as an `ArrayBuffer`.
    const pdfResponse = await fetch(documentUrl, { headers });
    if (!pdfResponse.ok) {
      throw new Error(`HTTP error: ${pdfResponse.status}`);
    }
    const documentBuffer = await pdfResponse.arrayBuffer();


    // Pass the `ArrayBuffer` as a PDF option instead of a URL.
    const instance = await NutrientViewer.load({
      container: "#pspdfkit",
      document: documentBuffer
    });
    console.log("Protected document loaded successfully");
    return instance;
  } catch (error) {
    console.error("Failed to load protected document:", error);
    throw error;
  }
}

Accessing an encrypted document

The easiest way to securely transfer your document is to serve it through HTTPS. This way, the browser will take care of decrypting the secured communication for you.

Additionally, you can encrypt the document’s content on the server using your own custom encryption. When you fetch the encrypted document, decrypt the data in the browser into an ArrayBuffer. Then pass it to the NutrientViewer.load() method, which will render your document:

// Standalone mode: loads decrypted document from ArrayBuffer
NutrientViewer.load({
  container: "#pspdfkit",
  document: myDecryptedArrayBuffer
})
  .then((instance) => {
    console.log("Decrypted document loaded");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });

Loading options

You can open files in any of the supported file formats.

NutrientViewer.load() also accepts different configuration options:

  • XFDF (Standalone only)

Example:

NutrientViewer.load({
  container: "#pspdfkit",
  document: documentUrl,
  toolbarItems: NutrientViewer.defaultToolbarItems.filter(item => item.type !== "print"),
  initialViewState: new NutrientViewer.ViewState({
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
  })
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });