{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-multi-format-viewer",
  "framework": "vue",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "multi-format-viewer",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-inputs",
    "@syncfusion/ej2-vue-pdfviewer",
    "@syncfusion/ej2-vue-progressbar"
  ],
  "description": "PDF viewer opens multi-format uploads via a drop area with a progress bar.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/pdf-viewer-multi-format-viewer.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-multi-format-viewer/PdfViewer.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <div class=\"content-wrapper-pdfviewer\">\n                <div id=\"dropAreaRef\" style=\"height: auto; overflow: auto\">\n                    <ejs-button id=\"browse\">Browse...</ejs-button>\n                    <div>\n                        <p style=\"margin: 15px;\">OR</p>\n                        <p id=\"drop\">Drop files (Word, Excel, PowerPoint, Image, PDF)</p>\n                    </div>\n                </div>\n                <div id=\"progressBar\" style=\"display: none;\">\n                    <div id=\"fileDetails\">\n                        <p id=\"fileName\"></p>\n                        <p id=\"fileSize\"></p>\n                    </div>\n                    <div id=\"linearProgressBar\" style=\"justify-content: center; display: none;\">\n                        <ejs-progressbar type='Linear' id=\"linear-pdfviewer\" ref=\"progressLinear\" :value='value'\n                            :animation=\"animation\" :min=\"min\" :max=\"max\" :load=\"load\" :height=\"height\" :width=\"width\">\n                        </ejs-progressbar>\n                        <span id=\"progress-status\" style=\"padding: 18px 5px;\"></span>\n                    </div>\n                    <div id=\"uploadedMessage\" style=\"display: none; margin-top: 10px;\">\n                        <p style=\"color: rgb(110, 218, 110);\">File successfully uploaded...</p>\n                    </div>\n                    <div id=\"FailedMessage\" style=\"display: none; margin-top: 10px;\">\n                        <p style=\"color: red;\">File not supported!</p>\n                    </div>\n                    <div id=\"fileSizeValidation\" style=\"display: none; margin-top: 10px;\">\n                        <p style=\"color: rgb(203, 38, 38);\">Maximum file size is (4.0 MB) for this operation...</p>\n                    </div>\n                </div>\n                <div id=\"uploader-pdfviewer\">\n                    <ejs-uploader ref=\"uploadObj\" id=\"fileUpload\" :selected=\"onSelect\" :allowedExtensions=\"extensions\"\n                        :dropArea=\"dropAreaRef\" v-bind:multiple='false'></ejs-uploader>\n                </div>\n            </div>\n            <div id=\"pdfviewer_container\" style=\"display: none;\">\n                <ejs-pdfviewer id=\"pdfviewer\" class=\"e-pv-multi-format-pdfviewer\" ref=\"pdfviewer\" :resourceUrl=\"resourceUrl\"\n                    :ajaxRequestSuccess=\"ajaxRequestSuccess\" :toolbarSettings=\"toolbarSettings\" :documentLoad=\"documentLoad\"\n                    :zoomMode=\"zoomMode\">\n                </ejs-pdfviewer>\n            </div>\n        </div>\n    </div>\n</template>\n<style>\n#pdfviewer {\n    height: 640px;\n}\n\n.content-wrapper-pdfviewer {\n    border: 1px dashed #c3c3cc;\n    position: relative;\n    text-align: center;\n    padding: 20px 0 10px;\n    margin-bottom: 15px;\n}\n\n#linear-pdfviewer {\n    width: fit-content;\n}\n\n#uploader-pdfviewer {\n    display: none;\n}\n\n\n.e-pv-multi-format-pdfviewer .e-pv-text-search-bar {\n    top: 40px !important;\n}\n\n.e-bigger .e-pv-multi-format-pdfviewer .e-pv-text-search-bar {\n    top: 48px !important;\n}\n</style>\n<script>\nimport { UploaderComponent } from \"@syncfusion/ej2-vue-inputs\";\nimport {\n    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,\n    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer\n} from \"@syncfusion/ej2-vue-pdfviewer\";\nimport { isNullOrUndefined, createElement } from \"@syncfusion/ej2-base\";\nimport { ButtonComponent } from \"@syncfusion/ej2-vue-buttons\";\nimport { ProgressBarComponent } from \"@syncfusion/ej2-vue-progressbar\";\n\nexport default {\n    components: {\n        'ejs-pdfviewer': PdfViewerComponent,\n        'ejs-uploader': UploaderComponent,\n        'ejs-button': ButtonComponent,\n        'ejs-progressbar': ProgressBarComponent\n    },\n    data: function () {\n        return {\n            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib',\n            toolbarSettings: {\n                showTooltip: true, toolbarItems: [\"DownloadOption\",\n                    \"UndoRedoTool\",\n                    \"PageNavigationTool\",\n                    \"MagnificationTool\",\n                    \"PanTool\",\n                    \"SelectionTool\",\n                    \"CommentTool\",\n                    \"SubmitForm\",\n                    \"SearchOption\",\n                    \"AnnotationEditTool\",\n                    \"FormDesignerEditTool\",\n                    \"PrintOption\"]\n            },\n            dropAreaRef: '.content-wrapper-pdfviewer',\n            value: 0,\n            min: 0,\n            max: 100,\n            height: '60',\n            width: '250',\n            extensions: '.doc, .docx, .rtf, .docm, .dotm, .dotx, .dot, .xls, .xlsx, .pptx, .pptm, .potx, .potm .jpeg, .png, .bmp, .pdf, .jpg',\n            zoomMode: 'FitToPage',\n            animation: {\n                enable: false,\n                delay: 0\n            },\n            pdfViewerProgressValue: 0,\n            uploadProgressValue: 0,\n        }\n    },\n    provide: {\n        PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]\n    },\n    mounted: function () {\n        document.getElementById('browse').onclick = () => {\n            document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n            return false;\n        }\n    },\n    methods: {\n        onSelect: function (args) {\n            var extensions = ['doc', 'docx', 'rtf', 'docm', 'dotm', 'dotx', 'dot', 'xls', 'xlsx', 'pptx', 'pptm', 'potx', 'potm', 'jpeg', 'png', 'bmp', 'pdf','jpg']\n            let progress = this.$refs.progressLinear.ej2Instances;\n            progress.value = 0;\n            progress.refresh();\n            document.getElementById(\"progress-status\").innerHTML = \"0%\";\n            let progressBarContainer = document.getElementById(\"progressBar\");\n            let progressBar = document.getElementById(\"linearProgressBar\");\n            let progressMessage = document.getElementById(\"uploadedMessage\");\n            let fileSizeValidation = document.getElementById(\"fileSizeValidation\");\n            document.getElementById(\"fileDetails\").style.display = \"block\";\n            document.getElementById(\"FailedMessage\").style.display = \"none\";\n            progressBarContainer.style.display = \"block\";\n            progressBar.style.display = \"flex\";\n            progressMessage.style.display = \"none\";\n            fileSizeValidation.style.display = \"none\";\n            if (!this.$refs.uploadObj.$el.querySelector('li')) {\n                var filesData = [];\n            }\n            if (isNullOrUndefined(this.$refs.uploadObj.$el.querySelector('.e-upload-files'))) {\n                var parentElement = createElement('ul', {\n                    className: 'e-upload-files',\n                });\n                document.getElementsByClassName('e-upload')[0].appendChild(parentElement);\n            }\n            var validFiles = args.filesData;\n            if (validFiles.length === 0) {\n                progressBarContainer.style.display = \"block\";\n                progressBar.style.display = \"none\";\n                progressMessage.style.display = \"block\";\n                args.cancel = true;\n                return;\n            }\n            if (!extensions.includes(validFiles[0].type)) {\n                document.getElementById(\"FailedMessage\").style.display = \"block\";\n                document.getElementById(\"fileDetails\").style.display = \"none\"\n                progressBar.style.display = \"none\";\n                progressMessage.style.display = \"none\";\n                document.getElementById('pdfviewer_container').style.display = 'none';\n                args.cancel = true;\n                return;\n            }\n            if (validFiles[0].type != \"pdf\" && validFiles[0].size > 4000000) {\n                fileSizeValidation.style.display = \"block\";\n                progressBar.style.display = \"none\";\n                document.getElementById(\"fileDetails\").style.display = \"none\";\n                document.getElementById('pdfviewer_container').style.display = 'none';\n                args.cancel = true;\n                return;\n            }\n            document.getElementById(\"fileName\").innerHTML = args.filesData[0].name;\n            var viewer = document.getElementById('pdfviewer').ej2_instances[0];\n            viewer.downloadFileName = args.filesData[0].name;\n            viewer.exportAnnotationFileName = args.filesData[0].name;\n            let size = document.getElementById(\"fileSize\");\n            if ((args.filesData[0].size.toString()).length <= 7) {\n                size.innerHTML = ((args.filesData[0].size / 1024).toFixed(1)).toString() + \" KB\";\n            } else {\n                let kbsize = args.filesData[0].size / 1024;\n                size.innerHTML = ((kbsize / 1024).toFixed(1)).toString() + \" MB\";\n            }\n            document.getElementById(\"fileSize\");\n            this.formSelectedData(validFiles[0], this.$refs.uploadObj);\n            var filesData = filesData.concat(validFiles);\n            const totalProgress = this.calculateTotalProgress();\n            this.updateProgressBar(totalProgress);\n            document.getElementById(\"progress-status\").innerHTML = totalProgress.toString() + \"%\";\n        },\n        formSelectedData: function (file, proxy) {\n            var liEle = createElement('li', {\n                className: 'e-upload-file-list',\n                attrs: {\n                    'data-file-name': file.name\n                },\n            });\n            this.readURL(liEle, file);\n            proxy.ej2Instances.fileList.push(liEle);\n        },\n        readURL: function (li, args) {\n            var file = args.rawFile;\n            var reader = new FileReader();\n            var type = args.type;\n            const data = this;\n            reader.addEventListener('load', function () {\n                let post = JSON.stringify({\n                    'data': reader.result,\n                    'type': type\n                })\n                const url = \"https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/LoadFile\"\n                let xhr = new XMLHttpRequest()\n                xhr.open('Post', url, true)\n                xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')\n                xhr.upload.addEventListener('progress', (event) => {\n                    if (event.lengthComputable) {\n                        const progressValue = Math.round((event.loaded / event.total) * 100);\n                        data.uploadProgressValue = progressValue;\n                        const totalProgress = data.calculateTotalProgress();\n                        data.updateProgressBar(totalProgress);\n                        document.getElementById(\"progress-status\").innerHTML = totalProgress.toString() + \"%\";\n                    }\n                });\n                xhr.onreadystatechange = function (event) {\n                    if (xhr.readyState === XMLHttpRequest.DONE) {\n                        if (xhr.status === 200) {\n                            var viewer = document.getElementById('pdfviewer').ej2_instances[0];\n                            viewer.documentPath = '';\n                            viewer.documentPath = xhr.responseText;\n                            data.pdfViewerProgressValue = 20;\n                            const totalProgress = data.calculateTotalProgress();\n                            data.updateProgressBar(totalProgress);\n                            document.getElementById(\"progress-status\").innerHTML = totalProgress.toString() + \"%\";\n                            document.getElementById('pdfviewer_container').style.display = 'block';\n                        } else {\n                            console.error('Error:', xhr.statusText);\n                        }\n                    }\n                }.bind(this);\n                xhr.send(post);\n            }, false);\n            if (file) {\n                reader.readAsDataURL(file);\n            }\n        },\n        ajaxRequestSuccess: function (args) {\n            if (args.action === \"Load\") {\n                this.pdfViewerProgressValue = 50;\n                const totalProgress = this.calculateTotalProgress();\n                this.updateProgressBar(totalProgress);\n                document.getElementById(\"progress-status\").innerHTML = totalProgress.toString() + \"%\";\n            }\n        },\n        documentLoad: function (args) {\n            this.pdfViewerProgressValue = 100;\n            const totalProgress = this.calculateTotalProgress();\n            this.updateProgressBar(totalProgress);\n            document.getElementById(\"progress-status\").innerHTML = totalProgress.toString() + \"%\";\n            setTimeout(() => {\n                document.getElementById(\"linearProgressBar\").style.display = \"none\";\n                document.getElementById(\"uploadedMessage\").style.display = \"block\";\n                this.uploadProgressValue = 0;\n                this.pdfViewerProgressValue = 0;\n                let progress = this.$refs.progressLinear.ej2Instances;\n                progress.value = 0;\n            }, 1000);\n        },\n        calculateTotalProgress: function () {\n            const totalProgress = (this.uploadProgressValue + this.pdfViewerProgressValue) / 2;\n            return totalProgress;\n        },\n        updateProgressBar: function (totalprogress) {\n            let progress = this.$refs.progressLinear.ej2Instances;\n            if (progress) {\n                progress.value = totalprogress;\n                progress.dataBind();\n            }\n        },\n        load: function (args) {\n            let selectedTheme = location.hash.split('/')[1];\n            selectedTheme = selectedTheme ? selectedTheme : 'Material';\n            args.progressBar.theme = (selectedTheme.charAt(0).toUpperCase() +\n                selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');\n            if (selectedTheme === 'fabric') {\n                args.progressBar.secondaryProgressColor = '#b0d0e9'\n            } else if (selectedTheme === 'material-dark') {\n                args.progressBar.secondaryProgressColor = '#b8b8b8'\n            } else if (selectedTheme === 'material') {\n                args.progressBar.secondaryProgressColor = '#f087ab'\n            } else if (selectedTheme === 'bootstrap5-dark') {\n                args.progressBar.secondaryProgressColor = '#2b5288'\n            } else if (selectedTheme === 'bootstrap5') {\n                args.progressBar.secondaryProgressColor = '#98c5f5'\n            } else if (selectedTheme === 'bootstrap') {\n                args.progressBar.secondaryProgressColor = '#acc6dc'\n            }\n            else if (selectedTheme === 'bootstrap4') {\n                args.progressBar.secondaryProgressColor = '#98c5f5'\n            }\n            else if (selectedTheme === 'bootstrap-dark') {\n                args.progressBar.secondaryProgressColor = '#b8b8b8'\n            } else if (selectedTheme === 'highcontrast') {\n                args.progressBar.secondaryProgressColor = '#aca379'\n            } else if (selectedTheme === 'fluent-dark') {\n                args.progressBar.secondaryProgressColor = '#2b5288'\n            } else if (selectedTheme === 'fluent') {\n                args.progressBar.secondaryProgressColor = '#98c5f5'\n            } else if (selectedTheme === 'tailwind-dark') {\n                args.progressBar.secondaryProgressColor = '#386e7f'\n            } else if (selectedTheme === 'tailwind') {\n                args.progressBar.secondaryProgressColor = '#b1afe9'\n            }\n        },\n    }\n};\n</script>"
    },
    {
      "target": "src/components/pdf-viewer-multi-format-viewer/PdfViewerView.vue",
      "content": "<template>\n  <PDFViewer />\n</template>\n\n<script setup>\nimport PDFViewer from '../../components/PDFViewer.vue'\n</script>"
    }
  ]
}