From ceaccb7cbce2d29eac8576f21e220427c27b170a Mon Sep 17 00:00:00 2001 From: Uma-SF4267 <156883240+Uma-SF4267@users.noreply.github.com> Date: Thu, 27 Aug 2026 13:50:56 +0530 Subject: [PATCH 1/2] Added the PDF Viewer Share Point sample --- SharePoint/{SharePoint => }/.eslintrc.js | 0 SharePoint/{SharePoint => }/.gitignore | 0 SharePoint/{SharePoint => }/.npmignore | 0 SharePoint/.vscode/settings.json | 1 + SharePoint/{SharePoint => }/.yo-rc.json | 0 SharePoint/{SharePoint => }/README.md | 42 ++- .../webparts/pdfviewer/PdfviewerWebPart.ts | 195 ---------- .../{SharePoint => }/config/config.json | 0 .../config/deploy-azure-storage.json | 0 .../config/package-solution.json | 0 SharePoint/{SharePoint => }/config/sass.json | 0 SharePoint/{SharePoint => }/config/serve.json | 0 .../config/write-manifests.json | 0 SharePoint/{SharePoint => }/gulpfile.js | 0 SharePoint/{SharePoint => }/package.json | 0 SharePoint/{SharePoint => }/src/index.ts | 0 .../pdfviewer/PdfviewerWebPart.manifest.json | 0 .../pdfviewer/PdfviewerWebPart.module.scss | 0 .../webparts/pdfviewer/PdfviewerWebPart.ts | 352 ++++++++++++++++++ .../pdfviewer/assets/welcome-dark.png | Bin .../pdfviewer/assets/welcome-light.png | Bin .../src/webparts/pdfviewer/loc/en-us.js | 0 .../src/webparts/pdfviewer/loc/mystrings.d.ts | 0 ...7a8b-fa43-424d-9383-5e5a2a782bfd_color.png | Bin ...8b-fa43-424d-9383-5e5a2a782bfd_outline.png | Bin SharePoint/{SharePoint => }/tsconfig.json | 0 26 files changed, 382 insertions(+), 208 deletions(-) rename SharePoint/{SharePoint => }/.eslintrc.js (100%) rename SharePoint/{SharePoint => }/.gitignore (100%) rename SharePoint/{SharePoint => }/.npmignore (100%) create mode 100644 SharePoint/.vscode/settings.json rename SharePoint/{SharePoint => }/.yo-rc.json (100%) rename SharePoint/{SharePoint => }/README.md (61%) delete mode 100644 SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts rename SharePoint/{SharePoint => }/config/config.json (100%) rename SharePoint/{SharePoint => }/config/deploy-azure-storage.json (100%) rename SharePoint/{SharePoint => }/config/package-solution.json (100%) rename SharePoint/{SharePoint => }/config/sass.json (100%) rename SharePoint/{SharePoint => }/config/serve.json (100%) rename SharePoint/{SharePoint => }/config/write-manifests.json (100%) rename SharePoint/{SharePoint => }/gulpfile.js (100%) rename SharePoint/{SharePoint => }/package.json (100%) rename SharePoint/{SharePoint => }/src/index.ts (100%) rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json (100%) rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/PdfviewerWebPart.module.scss (100%) create mode 100644 SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/assets/welcome-dark.png (100%) rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/assets/welcome-light.png (100%) rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/loc/en-us.js (100%) rename SharePoint/{SharePoint => }/src/webparts/pdfviewer/loc/mystrings.d.ts (100%) rename SharePoint/{SharePoint => }/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_color.png (100%) rename SharePoint/{SharePoint => }/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_outline.png (100%) rename SharePoint/{SharePoint => }/tsconfig.json (100%) diff --git a/SharePoint/SharePoint/.eslintrc.js b/SharePoint/.eslintrc.js similarity index 100% rename from SharePoint/SharePoint/.eslintrc.js rename to SharePoint/.eslintrc.js diff --git a/SharePoint/SharePoint/.gitignore b/SharePoint/.gitignore similarity index 100% rename from SharePoint/SharePoint/.gitignore rename to SharePoint/.gitignore diff --git a/SharePoint/SharePoint/.npmignore b/SharePoint/.npmignore similarity index 100% rename from SharePoint/SharePoint/.npmignore rename to SharePoint/.npmignore diff --git a/SharePoint/.vscode/settings.json b/SharePoint/.vscode/settings.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/SharePoint/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/SharePoint/SharePoint/.yo-rc.json b/SharePoint/.yo-rc.json similarity index 100% rename from SharePoint/SharePoint/.yo-rc.json rename to SharePoint/.yo-rc.json diff --git a/SharePoint/SharePoint/README.md b/SharePoint/README.md similarity index 61% rename from SharePoint/SharePoint/README.md rename to SharePoint/README.md index 424b359..8a24e59 100644 --- a/SharePoint/SharePoint/README.md +++ b/SharePoint/README.md @@ -1,6 +1,6 @@ -# SharePoint PDF Viewer Web Part +# SharePoint Multi-Format Document Viewer Web Part -A SharePoint Framework (SPFx) web part that integrates **Syncfusion EJ2 PDF Viewer** for viewing PDF documents stored in SharePoint. This application provides a view-only mode with a user-friendly interface for document selection and navigation. +A SharePoint Framework (SPFx) web part that integrates **Syncfusion EJ2 Document Viewer** for viewing PDF, Word, and Excel documents stored in SharePoint. This application provides a view-only mode with a user-friendly interface for document selection and navigation. ## 📦 Installation @@ -21,21 +21,35 @@ A SharePoint Framework (SPFx) web part that integrates **Syncfusion EJ2 PDF View npm install ``` -3. **Configure PDF Source Location** +3. **Configure Document Source Location** Edit `src/webparts/pdfviewer/PdfviewerWebPart.ts`: - Replace `YOUR-SHAREPOINT-SITE` with your SharePoint site URL - Replace `{your-site-name}` with your site name - - Replace `{documents-containing-path}` with the path to your PDF documents folder + - Replace `{documents-containing-path}` with the path to your documents folder ```typescript const url = `${targetSite}/_api/web/GetFolderByServerRelativeUrl('/sites/{your-site-name}/{documents-containing-path}')/Files`; ``` + + **Supported File Types**: + - PDF + - Word + - Excel + +4. **Configure Default Document** (Optional) + Update the `documentPath` in the Document Viewer initialization: + ```typescript + documentPath: '{Default-Document-Location-of-Sharepoint}' + ``` + Replace `{Default-Document-Location-of-Sharepoint}` with the URL string of your default document to load on initialization. -4. **Configure Resource URL** (Optional) - Update the `resourceUrl` in the PDF Viewer initialization: +5. **Configure Resource URL** (Optional) + Update the `resourceUrl` in the Document Viewer initialization: ```typescript resourceUrl: '${YOUR-LOCATION-FOR-RESOURCE}/ej2-pdfviewer-lib' ``` + + **File Conversion**: Non-PDF documents (Word, Excel) are automatically converted to PDF format using Syncfusion's conversion service before displaying in the viewer. ## Run the application @@ -56,8 +70,8 @@ The sample will be hosted in `https://{tenantDomain}/_layouts/workbench.aspx`. 3. Click **+ Add a new web part** 4. Search for **"pdfviewer"** (labeled as "Advanced" category) 5. Click to add the web part -6. The web part will load available PDF documents from the configured location -7. Use the dropdown menu to select a PDF document +6. The web part will load available documents (PDF, Word, Excel) from the configured location +7. Use the dropdown menu to select a document 8. The selected document will load in the viewer ### Web Part Configuration @@ -70,7 +84,7 @@ The sample will be hosted in `https://{tenantDomain}/_layouts/workbench.aspx`. ### Toolbar Options (View-Only Mode) The toolbar displays the following tools: -- **Open Option**: Load a different document +- **Open Option**: Upload and load a different document - **Page Navigation Tool**: Jump to specific pages - **Magnification Tool**: Zoom controls - **Pan Tool**: Navigate large pages @@ -87,12 +101,14 @@ viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[x], { ``` ### Disabled Features -- Annotations and sticky notes +- Annotation toolbar +- Sticky notes annotation - Page organizer -- Context menu interactions -- Direct form field editing +- Context menu +- Form field editing (all fields are read-only) ## 🔗 Resources -- [Syncfusion Javascript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) +- [Syncfusion Document Editor](https://www.syncfusion.com/javascript-ui-controls/document-editor) +- [Syncfusion PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) - [Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point) \ No newline at end of file diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts b/SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts deleted file mode 100644 index af75ea9..0000000 --- a/SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts +++ /dev/null @@ -1,195 +0,0 @@ - -import { Version } from '@microsoft/sp-core-library'; -import { - IPropertyPaneConfiguration, - PropertyPaneTextField -} from '@microsoft/sp-property-pane'; -import { SPHttpClient } from '@microsoft/sp-http'; -import { - BaseClientSideWebPart -} from '@microsoft/sp-webpart-base'; - -import { PdfViewer, Toolbar, Magnification, Navigation, - Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, - FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, - Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, - FormFields, FormDesigner); - -export interface IPdfViewerWebPartProps { - description: string; -} - -interface IPdfFile { - name: string; - url: string; -} - -export default class PdfViewerWebPart extends BaseClientSideWebPart { - - private pdfViewer: PdfViewer | undefined; - private pdfFiles: IPdfFile[] = []; - - public render(): void { - - this.domElement.innerHTML = ` - -
-
- - -
-
Loading PDF documents from SiteAssets/pdfs...
- -
-
- `; - - const siteUrl = this.context.pageContext.web.absoluteUrl; - console.log("Site URL: ", siteUrl); - - // Fetch PDF documents - this.fetchPdfDocuments(siteUrl); - - // Initialize PDF Viewer - this.initializePdfViewer(); - } - - private async fetchPdfDocuments(siteUrl: string): Promise { - try { - const targetSite = "YOUR-SHAREPOINT-SITE"; - - const url = `${targetSite}/_api/web/GetFolderByServerRelativeUrl('/sites/{your-site-name}/{documents-containing-path}')/Files`; - - const response = await this.context.spHttpClient.get( - url, - SPHttpClient.configurations.v1 - ); - - if (!response.ok) { - throw new Error(`Failed to fetch PDFs: ${response.statusText}`); - } - - const data = await response.json(); - - console.log(data); - - this.pdfFiles = data.value - .filter((item: any) => - item.Name.toLowerCase().endsWith('.pdf')) - .map((item: any) => ({ - name: item.Name, - url: `${siteUrl}${item.ServerRelativeUrl}` - })); - - console.log('PDF Files found:', this.pdfFiles); - this.populateDropdown(); - - } catch (error) { - console.error('Error fetching PDF documents:', error); - const errorDiv = document.getElementById('errorMessage'); - if (errorDiv) { - errorDiv.style.display = 'block'; - errorDiv.textContent = `Error loading documents: ${error instanceof Error ? error.message : 'Unknown error'}`; - } - } - } - - private populateDropdown(): void { - const dropdown = document.getElementById('pdfDropdown') as HTMLSelectElement; - const loadingMessage = document.getElementById('loadingMessage'); - - if (!dropdown) return; - - dropdown.innerHTML = ''; - - this.pdfFiles.forEach((file) => { - const option = document.createElement('option'); - option.value = file.url; - option.textContent = file.name; - dropdown.appendChild(option); - }); - - if (loadingMessage) { - loadingMessage.style.display = 'none'; - } - - // Add change event listener - dropdown.addEventListener('change', (e: Event) => { - const selectedUrl = (e.target as HTMLSelectElement).value; - if (selectedUrl) { - this.loadPdfDocument(selectedUrl); - } - }); - } - - private initializePdfViewer(): void { - this.pdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/gis-succinctly.pdf', // Will be set when user selects a document - resourceUrl: '${YOUR-LOCATION-FOR-RESOURCE}/ej2-pdfviewer-lib', - toolbarSettings: { - showTooltip: true, - toolbarItems: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'PrintOption',] - }, - enableAnnotationToolbar: false, - enableDownload: true, - enableStickyNotesAnnotation: false, - enablePageOrganizer: false, - annotationSettings: { - isLock: true, - }, - contextMenuOption: 'None', - documentLoad: () => { - const viewer = (document.getElementById('PdfViewer') as any).ej2_instances[0]; - const formField = viewer.retrieveFormFields(); - for (let x = 0; x < formField.length; x++) { - viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[x], { - isReadOnly: true, - }); - } - } - }); - - this.pdfViewer.appendTo('#PdfViewer'); - } - - private loadPdfDocument(url: string): void { - if (this.pdfViewer) { - this.pdfViewer.load(url, "null"); - console.log('Loading PDF:', url); - } - } - - protected get dataVersion(): Version { - return Version.parse('1.0'); - } - - protected getPropertyPaneConfiguration(): - IPropertyPaneConfiguration { - - return { - pages: [ - { - header: { - description: 'PDF Viewer Settings' - }, - groups: [ - { - groupName: 'Basic Settings', - groupFields: [ - PropertyPaneTextField('description', { - label: 'Description' - }) - ] - } - ] - } - ] - }; - } -} diff --git a/SharePoint/SharePoint/config/config.json b/SharePoint/config/config.json similarity index 100% rename from SharePoint/SharePoint/config/config.json rename to SharePoint/config/config.json diff --git a/SharePoint/SharePoint/config/deploy-azure-storage.json b/SharePoint/config/deploy-azure-storage.json similarity index 100% rename from SharePoint/SharePoint/config/deploy-azure-storage.json rename to SharePoint/config/deploy-azure-storage.json diff --git a/SharePoint/SharePoint/config/package-solution.json b/SharePoint/config/package-solution.json similarity index 100% rename from SharePoint/SharePoint/config/package-solution.json rename to SharePoint/config/package-solution.json diff --git a/SharePoint/SharePoint/config/sass.json b/SharePoint/config/sass.json similarity index 100% rename from SharePoint/SharePoint/config/sass.json rename to SharePoint/config/sass.json diff --git a/SharePoint/SharePoint/config/serve.json b/SharePoint/config/serve.json similarity index 100% rename from SharePoint/SharePoint/config/serve.json rename to SharePoint/config/serve.json diff --git a/SharePoint/SharePoint/config/write-manifests.json b/SharePoint/config/write-manifests.json similarity index 100% rename from SharePoint/SharePoint/config/write-manifests.json rename to SharePoint/config/write-manifests.json diff --git a/SharePoint/SharePoint/gulpfile.js b/SharePoint/gulpfile.js similarity index 100% rename from SharePoint/SharePoint/gulpfile.js rename to SharePoint/gulpfile.js diff --git a/SharePoint/SharePoint/package.json b/SharePoint/package.json similarity index 100% rename from SharePoint/SharePoint/package.json rename to SharePoint/package.json diff --git a/SharePoint/SharePoint/src/index.ts b/SharePoint/src/index.ts similarity index 100% rename from SharePoint/SharePoint/src/index.ts rename to SharePoint/src/index.ts diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json b/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json rename to SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.module.scss b/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.module.scss similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.module.scss rename to SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.module.scss diff --git a/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts b/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts new file mode 100644 index 0000000..7588b52 --- /dev/null +++ b/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.ts @@ -0,0 +1,352 @@ + +import { Version } from '@microsoft/sp-core-library'; +import { + IPropertyPaneConfiguration, + PropertyPaneTextField +} from '@microsoft/sp-property-pane'; +import { SPHttpClient } from '@microsoft/sp-http'; +import { + BaseClientSideWebPart +} from '@microsoft/sp-webpart-base'; + +import { PdfViewer, Toolbar, Magnification, Navigation, + Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, + Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner); + +export interface IPdfViewerWebPartProps { + description: string; +} + +interface IPdfFile { + name: string; + url: string; +} + +export default class PdfViewerWebPart extends BaseClientSideWebPart { + + private pdfViewer: PdfViewer | undefined; + private pdfFiles: IPdfFile[] = []; + + public render(): void { + + this.domElement.innerHTML = ` + +
+
+ + +
+
Loading PDF documents from SiteAssets/pdfs...
+ +
+ +
+ `; + + const siteUrl = this.context.pageContext.web.absoluteUrl; + this.fetchPdfDocuments(siteUrl); + this.initializePdfViewer(); + this.setupFileUploadHandler(); + } + + private async fetchPdfDocuments(siteUrl: string): Promise { + try { + const targetSite = "YOUR-SHAREPOINT-SITE"; + + const url = `${targetSite}/_api/web/GetFolderByServerRelativeUrl('{your-site-name}/{documents-containing-path}')/Files`; + + const response = await this.context.spHttpClient.get( + url, + SPHttpClient.configurations.v1 + ); + + if (!response.ok) { + throw new Error(`Failed to fetch PDFs: ${response.statusText}`); + } + const data = await response.json(); + this.pdfFiles = data.value + .filter((item: any) => { + const fileName = item.Name.toLowerCase(); + // Include PDF, Word, and Excel files + return fileName.endsWith('.pdf') || + fileName.endsWith('.doc') || + fileName.endsWith('.docx') || + fileName.endsWith('.dot') || + fileName.endsWith('.dotx') || + fileName.endsWith('.docm') || + fileName.endsWith('.dotm') || + fileName.endsWith('.rtf') || + fileName.endsWith('.xls') || + fileName.endsWith('.xlsx'); + }) + .map((item: any) => ({ + name: item.Name, + url: `${siteUrl}${item.ServerRelativeUrl}` + })); + this.populateDropdown(); + + } catch (error) { + console.error('Error fetching PDF documents:', error); + const errorDiv = document.getElementById('errorMessage'); + if (errorDiv) { + errorDiv.style.display = 'block'; + errorDiv.textContent = `Error loading documents: ${error instanceof Error ? error.message : 'Unknown error'}`; + } + } + } + + private setupFileUploadHandler(): void { + const fileUploadInput = document.getElementById('pv-fileUpload') as HTMLInputElement; + if (fileUploadInput) { + fileUploadInput.addEventListener('change', (e: Event) => { + this.readFile(e); + }); + } + } + + private readFile = (args: Event): void => { + const input = args.target as HTMLInputElement; + const file: File | undefined = input.files?.[0]; + + if (!file) { + return; + } + + const reader: FileReader = new FileReader(); + const fileExtension: string = file.name.split('.').pop()?.toLowerCase() || ''; + + reader.addEventListener('load', () => { + const base64Data: string = reader.result as string; + this.convertAndLoadDocument(base64Data, fileExtension); + }, false); + + if (file) { + reader.readAsDataURL(file); + } + input.value = ''; + }; + + private convertAndLoadDocument(fileData: string, fileType: string): void { + const conversionEndpoint = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/LoadFile"; + let base64Data = fileData; + + if (fileData.indexOf('http') === 0) { + this.fetchFileAndConvert(fileData, fileType, conversionEndpoint); + return; + } + + const postData: string = JSON.stringify({ + 'data': base64Data, + 'type': fileType + }); + + const xhr: XMLHttpRequest = new XMLHttpRequest(); + xhr.open('Post', conversionEndpoint, true); + xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8'); + + xhr.onload = () => { + if (xhr.status === 200) { + // Load the converted PDF + const pdfBase64 = (xhr as XMLHttpRequest).responseText; + if (this.pdfViewer) { + this.pdfViewer.documentPath = ''; + this.pdfViewer.documentPath = pdfBase64; + } + } else { + console.error('Conversion failed:', xhr.statusText); + alert('Failed to convert document. Please try again.'); + } + }; + + xhr.onerror = () => { + console.error('Error converting document'); + alert('Error converting document. Please check the server connection.'); + }; + + xhr.send(postData); + } + + private fetchFileAndConvert(fileUrl: string, fileType: string, conversionEndpoint: string): void { + // Fetch file from URL and convert to Base64 + const xhr: XMLHttpRequest = new XMLHttpRequest(); + xhr.open('GET', fileUrl, true); + xhr.responseType = 'blob'; + + xhr.onload = () => { + if (xhr.status === 200) { + const blob = xhr.response; + const reader = new FileReader(); + + reader.onload = () => { + const base64Data = reader.result as string; + this.sendConversionRequest(base64Data, fileType, conversionEndpoint); + }; + + reader.onerror = () => { + console.error('Error reading file blob'); + alert('Error reading file. Please try again.'); + }; + + reader.readAsDataURL(blob); + } else { + console.error('Failed to fetch file:', xhr.statusText); + alert('Failed to load document file. Please try again.'); + } + }; + + xhr.onerror = () => { + console.error('Error fetching file'); + alert('Error loading file. Please check the server connection.'); + }; + + xhr.send(); + } + + private sendConversionRequest(base64Data: string, fileType: string, conversionEndpoint: string): void { + const postData: string = JSON.stringify({ + 'data': base64Data, + 'type': fileType + }); + + const xhr: XMLHttpRequest = new XMLHttpRequest(); + xhr.open('Post', conversionEndpoint, true); + xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8'); + + xhr.onload = () => { + if (xhr.status === 200) { + const pdfBase64 = (xhr as XMLHttpRequest).responseText; + if (this.pdfViewer) { + this.pdfViewer.documentPath = ''; + this.pdfViewer.documentPath = pdfBase64; + } + } else { + console.error('Conversion failed:', xhr.statusText); + alert('Failed to convert document. Please try again.'); + } + }; + + xhr.onerror = () => { + console.error('Error converting document'); + alert('Error converting document. Please check the server connection.'); + }; + + xhr.send(postData); + } + + private populateDropdown(): void { + const dropdown = document.getElementById('pdfDropdown') as HTMLSelectElement; + const loadingMessage = document.getElementById('loadingMessage'); + + if (!dropdown) return; + + dropdown.innerHTML = ''; + + this.pdfFiles.forEach((file) => { + const option = document.createElement('option'); + option.value = file.url; + option.textContent = file.name; + dropdown.appendChild(option); + }); + + if (loadingMessage) { + loadingMessage.style.display = 'none'; + } + + // Add change event listener + dropdown.addEventListener('change', (e: Event) => { + const selectedUrl = (e.target as HTMLSelectElement).value; + if (selectedUrl) { + this.loadPdfDocument(selectedUrl); + } + }); + } + + private initializePdfViewer(): void { + this.pdfViewer = new PdfViewer({ + documentPath: '{Default-Document-Location-of-Sharepoint}', + resourceUrl: '${YOUR-LOCATION-FOR-RESOURCE}/ej2-pdfviewer-lib', + toolbarSettings: { + showTooltip: true, + toolbarItems: [{ prefixIcon: 'e-icons e-folder', id: 'pv_file_Open', tooltipText: 'Open' }, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'PrintOption',] + }, + enableAnnotationToolbar: false, + enableDownload: true, + enableStickyNotesAnnotation: false, + enablePageOrganizer: false, + annotationSettings: { + isLock: true, + }, + contextMenuOption: 'None', + documentLoad: () => { + const viewer = (document.getElementById('PdfViewer') as any).ej2_instances[0]; + const formField = viewer.retrieveFormFields(); + for (let x = 0; x < formField.length; x++) { + viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[x], { + isReadOnly: true, + }); + } + }, + toolbarClick: (args) => { + if (args.item.id === 'pv_file_Open') { + let fileUpload: HTMLElement | null = document.getElementById('pv-fileUpload'); + fileUpload?.click(); + } + } + }); + + this.pdfViewer.appendTo('#PdfViewer'); + } + + private loadPdfDocument(url: string): void { + // Load PDF via service conversion (same as toolbar upload) + const fileExtension: string = url.split('.').pop()?.toLowerCase() || 'pdf'; + if (this.pdfViewer) { + this.pdfViewer.unload(); + } + if (fileExtension === 'pdf') { + // Direct PDF - load without conversion + if (this.pdfViewer) { + this.pdfViewer.load(url, "null"); + } + } else { + // Convert via service for non-PDF files + this.convertAndLoadDocument(url, fileExtension); + } + } + + protected get dataVersion(): Version { + return Version.parse('1.0'); + } + + protected getPropertyPaneConfiguration(): + IPropertyPaneConfiguration { + + return { + pages: [ + { + header: { + description: 'PDF Viewer Settings' + }, + groups: [ + { + groupName: 'Basic Settings', + groupFields: [ + PropertyPaneTextField('description', { + label: 'Description' + }) + ] + } + ] + } + ] + }; + } +} diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/assets/welcome-dark.png b/SharePoint/src/webparts/pdfviewer/assets/welcome-dark.png similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/assets/welcome-dark.png rename to SharePoint/src/webparts/pdfviewer/assets/welcome-dark.png diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/assets/welcome-light.png b/SharePoint/src/webparts/pdfviewer/assets/welcome-light.png similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/assets/welcome-light.png rename to SharePoint/src/webparts/pdfviewer/assets/welcome-light.png diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/loc/en-us.js b/SharePoint/src/webparts/pdfviewer/loc/en-us.js similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/loc/en-us.js rename to SharePoint/src/webparts/pdfviewer/loc/en-us.js diff --git a/SharePoint/SharePoint/src/webparts/pdfviewer/loc/mystrings.d.ts b/SharePoint/src/webparts/pdfviewer/loc/mystrings.d.ts similarity index 100% rename from SharePoint/SharePoint/src/webparts/pdfviewer/loc/mystrings.d.ts rename to SharePoint/src/webparts/pdfviewer/loc/mystrings.d.ts diff --git a/SharePoint/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_color.png b/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_color.png similarity index 100% rename from SharePoint/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_color.png rename to SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_color.png diff --git a/SharePoint/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_outline.png b/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_outline.png similarity index 100% rename from SharePoint/SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_outline.png rename to SharePoint/teams/87887a8b-fa43-424d-9383-5e5a2a782bfd_outline.png diff --git a/SharePoint/SharePoint/tsconfig.json b/SharePoint/tsconfig.json similarity index 100% rename from SharePoint/SharePoint/tsconfig.json rename to SharePoint/tsconfig.json From ec8dfdbce4febe9157bef371a1e44836f58aff98 Mon Sep 17 00:00:00 2001 From: Uma-SF4267 <156883240+Uma-SF4267@users.noreply.github.com> Date: Thu, 27 Aug 2026 14:38:44 +0530 Subject: [PATCH 2/2] Removed .vscode folder --- SharePoint/.vscode/settings.json | 1 - 1 file changed, 1 deletion(-) delete mode 100644 SharePoint/.vscode/settings.json diff --git a/SharePoint/.vscode/settings.json b/SharePoint/.vscode/settings.json deleted file mode 100644 index 9e26dfe..0000000 --- a/SharePoint/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file