--- title: "Open and display PDF in browser using JavaScript | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/open-a-document/" md_url: "https://www.nutrient.io/guides/web/open-a-document.md" last_updated: "2026-05-15T19:10:05.088Z" description: "Use this guide for embedded viewer app-shell workflows: mount the viewer, load documents, and pair with lifecycle-safe document switching guidance." --- # Open and display PDFs in the browser using JavaScript Use JavaScript to open PDFs from a number of input sources, including remote URLs, blobs, array buffers, local storage, and Base64 data. Opened PDFs can be rendered in the viewer, annotated, and edited. [Try for free](https://www.nutrient.io/sdk/web/getting-started/other-frameworks/javascript.md) [Launch demo](https://www.nutrient.io/demo/) ## Quick start Open a PDF document in a few lines of code: ```js NutrientViewer.load({ container: "#pspdfkit", document: "/path/to/document.pdf" }).then((instance) => { console.log("Document loaded successfully"); }).catch((error) => { console.error("Failed to load document:", error.message); }); ``` The `container` property specifies the DOM element where the viewer will be rendered. The `document` property can be a URL, ArrayBuffer, Blob, or Base64 data URL. ## Integration checklist Use the checklist below to validate your setup before moving to production. - Verify asset mode/path (`useCDN` or `baseUrl`). - Confirm entrypoint import and viewer mount container. - Unload before reload when switching documents. - Reapply toolbar/custom UI configuration after each load. - Confirm export behavior matches your workflow. For a complete production flow (app-shell layout, switch lifecycle, and runnable project setup), refer to the [embedding Web SDK in a dashboard/app shell](https://www.nutrient.io/guides/web/viewer/embed-in-dashboard-app-shell.md) guide. ## Key capabilities - **Local storage or remote URL** — Open files that are stored anywhere - **Input data types** — Load from a blob, ArrayBuffer, or Base64 - **Secured PDFs** — Open encrypted or password-protected files - **Client-side** — Open PDFs directly in the browser (no server needed) - **Extendable** — Add annotation, signing, editing, forms, and more ## Guides for opening a document **[Open from a remote URL](https://www.nutrient.io/guides/web/open-a-document/from-remote-url.md)**\ How to open a PDF document from a remote URL **[Open from a blob](https://www.nutrient.io/guides/web/open-a-document/from-blob.md)**\ How to open a PDF document from a blob **[Open from an ArrayBuffer](https://www.nutrient.io/guides/web/open-a-document/from-arraybuffer.md)**\ How to open a PDF document from an ArrayBuffer **[Open from local storage](https://www.nutrient.io/guides/web/open-a-document/from-local-storage.md)**\ How to open a PDF document from local storage **[Open from Base64 data](https://www.nutrient.io/guides/web/open-a-document/from-base64-data.md)**\ How to open a PDF document from Base64 data **[Open from Document Engine](https://www.nutrient.io/guides/web/open-a-document/from-document-engine.md)**\ How to open a PDF document from Document Engine **[Temporary storage for PDF downloads](https://www.nutrient.io/guides/web/open-a-document/temp-storage.md)**\ How temporary storage works for URL-loaded PDFs in the browser **[Open password-protected PDFs](https://www.nutrient.io/guides/web/features/password-protected-pdfs.md)**\ How to transparently open password-protected PDFs **[Open HTTP authenticated PDFs](https://www.nutrient.io/guides/web/open-a-document/secured-documents/http-authenticated.md)**\ How to transparently open PDFs protected by HTTP authentication **[Open encrypted PDFs](https://www.nutrient.io/guides/web/standalone/accessing-protected-files.md)**\ How to decrypt a PDF that uses custom encryption **[Open on a specific page](https://www.nutrient.io/guides/web/features/open-parameters.md)**\ How to open a PDF and show a specific page after loading ## File type support - PDF, PDF/A (1, 2, 3, 4) - [MS Office documents](https://www.nutrient.io/guides/web/open-a-document/office.md) (DOCX, DOC, DOTX, DOCM, XLSX, XLS, XLSM, PPTX, PPT, PPTM) - PNG, JPEG, JPG, TIFF, TIF - Text (TXT) ## Framework support Nutrient Web SDK is compatible with all JavaScript frameworks, including React, Angular, Vue.js, Svelte, Blazor, Next.js, Nuxt.js, TypeScript, and jQuery. It’s also compatible with Electron, ASP.NET, PHP, Laravel, Ruby on Rails, and HTML5. It just needs a DOM container to append the viewer, which is possible with any framework. **Call to Action** Start your free trial for unlimited access and expert support. [Learn More](https://www.nutrient.io/sdk/web/getting-started/other-frameworks/javascript.md) --- ## Related pages - [Open PDFs from Base64 in the browser using JavaScript](/guides/web/open-a-document/from-base64-data.md) - [Open PDFs from an ArrayBuffer using JavaScript](/guides/web/open-a-document/from-arraybuffer.md) - [Open and display PDFs from a Blob using JavaScript](/guides/web/open-a-document/from-blob.md) - [Open documents from Document Engine](/guides/web/open-a-document/from-document-engine.md) - [Open image files from a URL using JavaScript](/guides/web/open-a-document/image-from-remote-url.md) - [Open local PDF files using JavaScript](/guides/web/open-a-document/from-local-storage.md) - [Open PDFs using DWS Viewer API](/guides/web/open-a-document/from-dws-viewer-api.md) - [Open Base64 image files using JavaScript](/guides/web/open-a-document/image-from-base64-data.md) - [Open and display PDF files from a remote URL using JavaScript](/guides/web/open-a-document/from-remote-url.md) - [Open local image files using JavaScript](/guides/web/open-a-document/image-from-local-storage.md) - [Open image files from a Blob using JavaScript](/guides/web/open-a-document/image-from-blob.md) - [Open Base64 MS Office files using JavaScript](/guides/web/open-a-document/office-from-base64-data.md) - [Open image files from an array buffer using JavaScript](/guides/web/open-a-document/image-from-arraybuffer.md) - [Open MS Office files from an ArrayBuffer using JavaScript](/guides/web/open-a-document/office-from-arraybuffer.md) - [Open MS Office files from a Blob using JavaScript](/guides/web/open-a-document/office-from-blob.md) - [Open local MS Office files using JavaScript](/guides/web/open-a-document/office-from-local-storage.md) - [Opening specific pages in PDFs using JavaScript](/guides/web/features/open-parameters.md) - [Open MS Office files from a URL using JavaScript](/guides/web/open-a-document/office-from-remote-url.md) - [Temporary storage for PDF downloads](/guides/web/open-a-document/temp-storage.md) ## Pages in this section - [Open MS Office files in the browser using JavaScript](/guides/web/open-a-document/office.md) - [Create and open encrypted PDFs using JavaScript](/guides/web/standalone/accessing-protected-files.md) - [Open password-protected PDFs in JavaScript](/guides/web/features/password-protected-pdfs.md) - [Restrict access to PDFs with HTTP basic authentication](/guides/web/open-a-document/secured-documents/http-authenticated.md)