Skip to main content
Participant
September 18, 2024
Question

PDF Embed Save button doesn't loaded when using 'enableAnnotationAPIs' config enabled

  • September 18, 2024
  • 0 replies
  • 160 views

Hello guys, I have case, so for some reason I need to hide the comment pannels on `annotationManager` and it must `enableAnnotationAPIs` enabled, but when I try to edit page the save button doesn't loaded, but when I disable `enableAnnotationAPIs` the save button is appear again. 


Anyone know how to make the save button loaded even I enableAnnotationAPIs?

 

I'm using laravel in my project, here is the code

<script type="text/javascript">
        const config = {!! json_encode($this->pdfConfig) !!}
        const clientId = "{{ $this->pdfKey }}";
        const urlToPDF = "{{ $this->pdfUrl }}";
        const pdfFileName = "{{ $this->pdfName }}";
        const rand = "{{ $this->rand }}";

        const saveOptions = {
            autoSaveFrequency: 0,
            enableFocusPolling: false,
            showSaveButton: true
        }

        function fetchPDF(urlToPDF) {
            return new Promise((resolve) => {
                fetch(urlToPDF)
                    .then((resolve) => resolve.blob())
                    .then((blob) => {
                        resolve(blob.arrayBuffer());
                    })
            })
        }

        function hideLink() {
            document.getElementById("getFile").style.display = "none";
        }

        function updateSaveUI(fileName) {
            document.getElementById("notifyUser").innerHTML =
                "File Saved";
            document.getElementById("notification").style.display = "flex";
        }

        document.addEventListener("adobe_dc_view_sdk.ready", function() {
            // Create embedded view
            var adobeDCView = new AdobeDC.View({
                clientId: clientId,
                divId: "pdf-embed-edit-adobe",
            });

            adobeDCView.registerCallback(
                AdobeDC.View.Enum.CallbackType.SAVE_API,
                function(metaData, content, options) {
                    var uint8Array = new Uint8Array(content);
                    var blob = new Blob([content], {
                        type: 'application/pdf'
                    });

                    formData = new FormData();
                    formData.append('rand', rand);
                    formData.append('pdf', blob, pdfFileName);
                    formData.append('letterId', "{!! $this->record->id !!}")

                    // save pdf using axios to route
                    axios.post(
                            "{!! route('save-pdf', absolute: false) !!}",
                            formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data',
                                }
                            })
                        .then(
                            function(response) {
                                console.log(response);
                                if (response.status == 200) {
                                    updateSaveUI(pdfFileName);
                                }
                            }
                        ).catch(
                            function(error) {
                                console.log(error);
                            }
                        )

                    return new Promise((resolve, reject) => {
                        resolve({
                            code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                            data: {
                                metaData: {
                                    fileName: "{!! $this->pdfName !!}"
                                }
                            }
                        });
                    });
                },
                saveOptions
            );



            // Show the file
            var previewFilePromise = adobeDCView.previewFile({
                    content: {
                        promise: fetchPDF(urlToPDF)
                    },
                    metaData: {
                        fileName: pdfFileName,
                        id: rand
                    }
                },
                config
            );

            // disable comment annotate
            previewFilePromise.then(adobeViewer => {
                adobeViewer.getAnnotationManager().then(annotationManager => {
                    annotationManager.setConfig({
                        showCommentsPanel: false
                    });

                });
            });
        });

        // Helper Functions:
        (function() {
            if (Blob.arrayBuffer != "function") {
                Blob.prototype.arrayBuffer = myArrayBuffer;
            }

            function myArrayBuffer() {
                return new Promise((resolve) => {
                    let fileReader = new FileReader();
                    fileReader.onload = () => {
                        resolve(fileReader.result);
                    };
                    fileReader.readAsArrayBuffer(this);
                });
            }
        })();
    </script>

 pdf embed script

 

'edit' => [
        'showDownloadPDF' => false,
        'showPrintPDF' => false,
        'showAnnotationTools' => true,
        'showFullScreen' => true,
        'enableAnnotationAPIs'=> true,
    ],

 config php

This topic has been closed for replies.