Open local file system PDF

# Open local MS Office files using JavaScript ### PDF [PDF](https://www.nutrient.io/guides/web/open-a-document/from-local-storage.md) ### MS Office [MS Office](https://www.nutrient.io/guides/web/open-a-document/office-from-local-storage.md) ### Image [Image](https://www.nutrient.io/guides/web/open-a-document/image-from-local-storage.md) In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s [local storage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it. First export the document as an `ArrayBuffer`, and then store it as a Base64 string: ```js const myDocumentArrayBuffer = await instance.exportPDF(); let base64EncodedDocument = ''; const len = myDocumentArrayBuffer.byteLength; for (let i = 0; i < len; i++) { base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]); } window.localStorage.setItem('document', base64EncodedDocument); ``` You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to [`NutrientViewer.load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load): ```js // Standalone mode: loads document from local storage const base64EncodedDocument = window.localStorage.getItem('document'); NutrientViewer.load({ container: "#pspdfkit", // `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`. document: `data:application/pdf;base64,${base64EncodedDocument}` }).then((instance) => { console.log("Document loaded from local storage"); }).catch((error) => { console.error("Failed to load document:", error); }); ``` Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system? Since uploaded files are received as `File` objects that share the `Blob` API, you can proceed similarly to how you do with `Blob`: ```js // Standalone mode: loads file from user's local file system // `event` is an HTML change event from an element. const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]); NutrientViewer.load({ container: "#pspdfkit", document: documentFileObjectUrl }).then((instance) => { // Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more. URL.revokeObjectURL(documentFileObjectUrl); console.log("File loaded successfully"); }).catch((error) => { URL.revokeObjectURL(documentFileObjectUrl); console.error("Failed to load file:", error); }); ``` 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 2 with the thumbnails sidebar open, do it like this: ```js // Standalone mode: loads file with custom initial view state // `event` is an HTML change event from an element. const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]); NutrientViewer.load({ container: "#pspdfkit", document: documentFileObjectUrl, initialViewState: new NutrientViewer.ViewState({ pageIndex: 2, sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS }) }).then((instance) => { // Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more. URL.revokeObjectURL(documentFileObjectUrl); console.log("File loaded on page 2 with thumbnails"); }).catch((error) => { URL.revokeObjectURL(documentFileObjectUrl); console.error("Failed to load file:", error); }); ``` Here’s a complete example that accepts all Standalone-supported input file formats: ```html Open local file system PDF

``` ## Loading options You can open files in any of the [supported file formats](https://www.nutrient.io/guides/web/about/file-type-support.md). `NutrientViewer.load()` also accepts different configuration options: * [`annotationTooltipCallback`](/api/web/NutrientViewer.Configuration.html#.annotationTooltipCallback) * [`customRenderers`](/api/web/NutrientViewer.Configuration.html#.customRenderers) * [`electronicSignatures`](/api/web/NutrientViewer.Configuration.html#.electronicSignatures) * [`annotationPresets`](/api/web/NutrientViewer.Configuration.html#annotationPresets) * [`autoSaveMode`](/api/web/NutrientViewer.Configuration.html#autoSaveMode) * [`baseUrl`](/api/web/NutrientViewer.Configuration.html#baseUrl) * [`container`](/api/web/NutrientViewer.Configuration.html#container) * [`customFonts`](/api/web/NutrientViewer.Configuration.html#customFonts) (Standalone only) * [`disableForms`](/api/web/NutrientViewer.Configuration.html#disableForms) * [`disableHighQualityPrinting`](/api/web/NutrientViewer.Configuration.html#disableHighQualityPrinting) * [`disableOpenParameters`](/api/web/NutrientViewer.Configuration.html#disableOpenParameters) * [`disableTextSelection`](/api/web/NutrientViewer.Configuration.html#disableTextSelection) * [`disableWebAssemblyStreaming`](/api/web/NutrientViewer.Configuration.html#disableWebAssemblyStreaming) (Standalone only) * [`document`](/api/web/NutrientViewer.Configuration.html#document) (Standalone only) * [`editableAnnotationTypes`](/api/web/NutrientViewer.Configuration.html#editableAnnotationTypes) * [`enableAutomaticLinkExtraction`](/api/web/NutrientViewer.Configuration.html#enableAutomaticLinkExtraction) (Standalone only) * [`enableServiceWorkerSupport`](/api/web/NutrientViewer.Configuration.html#enableServiceWorkerSupport) * [`formFieldsNotSavingSignatures`](/api/web/NutrientViewer.Configuration.html#formFieldsNotSavingSignatures) * [`headless`](/api/web/NutrientViewer.Configuration.html#headless) * [`initialViewState`](/api/web/NutrientViewer.Configuration.html#initialViewState) * [`instantJSON`](/api/web/NutrientViewer.Configuration.html#instantJSON) (Standalone only) * [`isEditableAnnotation`](/api/web/NutrientViewer.Configuration.html#isEditableAnnotation) * [`isEditableComment`](/api/web/NutrientViewer.Configuration.html#isEditableComment) * [`licenseKey`](/api/web/NutrientViewer.Configuration.html#licenseKey) (Standalone only) * [`locale`](/api/web/NutrientViewer.Configuration.html#locale) * [`maxDefaultZoomLevel`](/api/web/NutrientViewer.Configuration.html#maxDefaultZoomLevel) * [`maxPasswordRetries`](/api/web/NutrientViewer.Configuration.html#maxPasswordRetries) * [`minDefaultZoomLevel`](/api/web/NutrientViewer.Configuration.html#minDefaultZoomLevel) * [`overrideMemoryLimit`](/api/web/NutrientViewer.Configuration.html#overrideMemoryLimit) (Standalone only) * [`password`](/api/web/NutrientViewer.Configuration.html#password) * [`populateInkSignatures`](/api/web/NutrientViewer.Configuration.html#populateInkSignatures) * [`populateStoredSignatures`](/api/web/NutrientViewer.Configuration.html#populateStoredSignatures) * [`preventTextCopy`](/api/web/NutrientViewer.Configuration.html#preventTextCopy) * [`printMode`](/api/web/NutrientViewer.html#.PrintMode) * [`renderPageCallback`](/api/web/NutrientViewer.Configuration.html#renderPageCallback) * [`serverUrl`](/api/web/NutrientViewer.Configuration.html#serverUrl) * [`stampAnnotationTemplates`](/api/web/NutrientViewer.Configuration.html#stampAnnotationTemplates) * [`standaloneInstancesPoolSize`](/api/web/NutrientViewer.Configuration.html#standaloneInstancesPoolSize) (Standalone only) * [`styleSheets`](/api/web/NutrientViewer.Configuration.html#styleSheets) * [`theme`](/api/web/NutrientViewer.Configuration.html#theme) * [`toolbarItems`](/api/web/NutrientViewer.Configuration.html#toolbarItems) * [`toolbarPlacement`](/api/web/NutrientViewer.Configuration.html#toolbarPlacement) * [`trustedCAsCallback`](/api/web/NutrientViewer.Configuration.html#trustedCAsCallback) (Standalone only) * [`XFDF`](/api/web/NutrientViewer.Configuration.html#XFDF) (Standalone only) * [`XFDFKeepCurrentAnnotations`](/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 and display PDFs from a Blob using JavaScript](/guides/web/open-a-document/from-blob.md) - [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 documents from Document Engine](/guides/web/open-a-document/from-document-engine.md) - [Open local PDF files using JavaScript](/guides/web/open-a-document/from-local-storage.md) - [Open Base64 image files using JavaScript](/guides/web/open-a-document/image-from-base64-data.md) - [Open PDFs using DWS Viewer API](/guides/web/open-a-document/from-dws-viewer-api.md) - [Open image files from an array buffer using JavaScript](/guides/web/open-a-document/image-from-arraybuffer.md) - [Open and display PDF files from a remote URL using JavaScript](/guides/web/open-a-document/from-remote-url.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 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 MS Office files from an ArrayBuffer using JavaScript](/guides/web/open-a-document/office-from-arraybuffer.md) - [Open image files from a URL using JavaScript](/guides/web/open-a-document/image-from-remote-url.md) - [Open MS Office files from a Blob using JavaScript](/guides/web/open-a-document/office-from-blob.md) - [Open MS Office files from a URL using JavaScript](/guides/web/open-a-document/office-from-remote-url.md) - [Opening specific pages in PDFs using JavaScript](/guides/web/features/open-parameters.md) - [Temporary storage for PDF downloads](/guides/web/open-a-document/temp-storage.md)