Open MS Office files from a URL using JavaScript
To load a document from a remote URL in standalone mode, pass it in the configuration object for 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, check response.ok, reject text/html responses, and pass the ArrayBuffer to NutrientViewer.load(). Without these checks, a sign-in page or other HTML response served with a success status reaches Nutrient Web SDK as if it were the document. Depending on your license and SDK version, the page then fails to load or opens as a document showing its raw text. Load failures include File not in PDF format or corrupted., which also appears when the response isn’t a document.
Temporary storage for PDF downloads
When you load a PDF from a URL in standalone mode, Nutrient manages temporary download storage automatically. For larger eligible PDFs, it may use the browser’s origin private file system (OPFS)(opens in a new tab) to reduce peak memory usage while the document is downloading.
If you don’t want Nutrient to use OPFS for temporary storage, set tempStorage: "memory". You can also set tempStorage: "opfs" to prefer OPFS for eligible URL-loaded PDFs, regardless of file size.
For details about how temporary storage works, when Nutrient uses it, and how to configure it, see our temporary storage guide.
Accessing an authenticated document
You may want to restrict access to your documents so they’re not publicly available on the internet. One common way to do this is with HTTP Basic authentication(opens in a new tab).
If you load a document from a URL protected by HTTP Basic authentication, Nutrient Web SDK asks 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, 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 transfer your document securely is to serve it through HTTPS. The browser then decrypts the secured communication for you.
Additionally, you can encrypt the document’s content on the server using 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 renders 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
Open files in any supported file format.
NutrientViewer.load() accepts the following configuration options:
customFonts(Standalone only)
disableWebAssemblyStreaming(Standalone only)document(Standalone only)
enableAutomaticLinkExtraction(Standalone only)
instantJSON(Standalone only)
licenseKey(Standalone only)
overrideMemoryLimit(Standalone only)
passwordonPasswordRequiredpopulateInkSignaturespopulateStoredSignaturespreventTextCopyprintModerenderPageCallbackserverUrlsignalstampAnnotationTemplates
standaloneInstancesPoolSize(Standalone only)
trustedCAsCallback(Standalone only)
XFDF(Standalone only)
XFDFKeepCurrentAnnotations(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); });