--- title: "Open image files (JPG, PNG, TIFF) from Blob in JavaScript | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-blob/" md_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-blob.md" last_updated: "2026-05-15T19:10:05.088Z" description: "Learn how to open and display PDF, MS Office, and image files from a Blob using JavaScript with our comprehensive guide." --- # Open image files from a Blob using JavaScript ### PDF [PDF](https://www.nutrient.io/guides/web/open-a-document/from-blob.md) ### MS Office [MS Office](https://www.nutrient.io/guides/web/open-a-document/office-from-blob.md) ### Image [Image](https://www.nutrient.io/guides/web/open-a-document/image-from-blob.md) Nutrient Web SDK in standalone mode accepts different input data types for a document: either as the document URL string, or as an `ArrayBuffer` containing the document file. Set it in the `document` property of the `NutrientViewer.Configuration` object passed to [`NutrientViewer.load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load). If your source document is available as a `Blob`, you can obtain an object URL for it and pass it in `document`: ```js // Standalone mode: loads document from Blob via object URL const documentBlobObjectUrl = URL.createObjectURL(blob); NutrientViewer.load({ container: "#pspdfkit", document: documentBlobObjectUrl }).then((instance) => { // Make sure to revoke the object URL so the browser doesn't hold on to the blob object that's not needed any more. URL.revokeObjectURL(documentBlobObjectUrl); console.log("Document loaded successfully"); }).catch((error) => { URL.revokeObjectURL(documentBlobObjectUrl); console.error("Failed to load document:", error); }); ``` The `Blob` can contain a file in any of the [different supported input formats](https://www.nutrient.io/guides/web/viewer/office-documents.md). It’s also possible to set the initial conditions of the viewer in the same configuration object by setting the [`initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState) property. For example, if you want to open a document on page 8 with the thumbnails sidebar open, do it like this: ```js // Standalone mode: loads document from Blob with custom initial view state const documentBlobObjectUrl = URL.createObjectURL(blob); NutrientViewer.load({ container: "#pspdfkit", document: documentBlobObjectUrl, initialViewState: new NutrientViewer.ViewState({ pageIndex: 8, sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS }) }).then((instance) => { // Make sure to revoke the object URL so the browser doesn't hold on to the blob object that's not needed any more. URL.revokeObjectURL(documentBlobObjectUrl); console.log("Document loaded on page 8 with thumbnails"); }).catch((error) => { URL.revokeObjectURL(documentBlobObjectUrl); console.error("Failed to load document:", error); }); ``` ## Loading options Open files in any [supported file format](https://www.nutrient.io/guides/web/about/file-type-support.md). `NutrientViewer.load()` accepts the following configuration options: - [`annotationTooltipCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.annotationTooltipCallback) - [`customRenderers`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.customRenderers) - [`electronicSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.electronicSignatures) - [`annotationPresets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#annotationPresets) - [`autoSaveMode`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#autoSaveMode) - [`baseUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#baseUrl) - [`container`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#container) - [`customFonts`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#customFonts) (Standalone only) - [`disableForms`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableForms) - [`disableHighQualityPrinting`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableHighQualityPrinting) - [`disableOpenParameters`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableOpenParameters) - [`disableTextSelection`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableTextSelection) - [`disableWebAssemblyStreaming`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableWebAssemblyStreaming) (Standalone only) - [`document`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#document) (Standalone only) - [`editableAnnotationTypes`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#editableAnnotationTypes) - [`enableAutomaticLinkExtraction`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableAutomaticLinkExtraction) (Standalone only) - [`enableServiceWorkerSupport`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableServiceWorkerSupport) - [`formFieldsNotSavingSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#formFieldsNotSavingSignatures) - [`headless`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#headless) - [`initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState) - [`instantJSON`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#instantJSON) (Standalone only) - [`isEditableAnnotation`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableAnnotation) - [`isEditableComment`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableComment) - [`licenseKey`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#licenseKey) (Standalone only) - [`locale`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#locale) - [`maxDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxDefaultZoomLevel) - [`maxPasswordRetries`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxPasswordRetries) - [`minDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#minDefaultZoomLevel) - [`overrideMemoryLimit`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#overrideMemoryLimit) (Standalone only) - [`password`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#password) - [`populateInkSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateInkSignatures) - [`populateStoredSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateStoredSignatures) - [`preventTextCopy`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#preventTextCopy) - [`printMode`](https://www.nutrient.io/api/web/modules/NutrientViewer.html#.PrintMode) - [`renderPageCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#renderPageCallback) - [`serverUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#serverUrl) - [`signal`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#signal) - [`stampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#stampAnnotationTemplates) - [`standaloneInstancesPoolSize`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#standaloneInstancesPoolSize) (Standalone only) - [`styleSheets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#styleSheets) - [`theme`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#theme) - [`toolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarItems) - [`toolbarPlacement`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarPlacement) - [`trustedCAsCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#trustedCAsCallback) (Standalone only) - [`XFDF`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDF) (Standalone only) - [`XFDFKeepCurrentAnnotations`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDFKeepCurrentAnnotations) (Standalone only) **Example** ```js 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); }); ``` --- ## 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 and display PDFs in the browser using JavaScript](/guides/web/open-a-document.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)