1. Feedback
  2. JavaScript
  3. 50478

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Undefined object whilst loading a pdf as base64 

vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68 Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
    at e.updateLeftPosition (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:397294)
    at e.renderPageContainer (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:394509)
    at e.initPageDiv (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:373438)
    at e.pageRender (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:311249)
    at e.requestSuccess (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:309438)
    at pdfViewer.serverActionSettings.clientSideRendering.loadRequestHandler.onSuccess (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:68:306156)
    at e.successHandler (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:135:472856)
    at e.stateChange (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:135:472464)
    at httpRequest.onreadystatechange (vendors~493df0b3.cb6041ded04ba4448f1d.chunk.js?v=li3fpmZBmfieloei-B1i63BW9iFsylQSdLGyV785QJo:135:470557)
17:10:29.690vendors~493df0b3.cb6…sylQSdLGyV785QJo:68 Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') at e.updateLeftPosition (vendors~493df0b3.cb6…GyV785QJo:68:397294) at e.renderPageContainer (vendors~493df0b3.cb6…GyV785QJo:68:394509) at e.initPageDiv (vendors~493df0b3.cb6…GyV785QJo:68:373438) at e.pageRender (vendors~493df0b3.cb6…GyV785QJo:68:311249) at e.requestSuccess (vendors~493df0b3.cb6…GyV785QJo:68:309438) at pdfViewer.serverActionSettings.clientSideRendering.loadRequestHandler.onSuccess (vendors~493df0b3.cb6…GyV785QJo:68:306156) at e.successHandler (vendors~493df0b3.cb6…yV785QJo:135:472856) at e.stateChange (vendors~493df0b3.cb6…yV785QJo:135:472464) at httpRequest.onreadystatechange (vendors~493df0b3.cb6…yV785QJo:135:470557)


Here's the code Im using in an Aurelia framework (javascript)

constructor(private controlElement: Element, private i18n: I18N, private reportService: ReportService, private l10n: L10n) {
        super();
        this.restUrl = AppSettings.get("restApiServer");
        this.restUrl = this.restUrl.slice(-1) !== "/" ? this.restUrl + "/" : this.restUrl;
        const locale = GeniusUtils.isFrench(this.i18n) ? "fr-CA" : "en-US";
        this.gLocale = locale;


        L10n.load(PDF_VIEWER_FR);
    }


    private canActivate(params: { payload: string }) {
        const companyCode = AppSettings.get("company").code;


        this.src = `api2/${companyCode}/report/execute?payload=${params.payload}`;
        return true;
    }


    private async attached() {
        L10n.load(PDF_VIEWER_FR);


        this.pdfData = await this.reportService.getReportBase64(this.src);
        this.gElementId = "PdfViewer";


        this.gServiceUrl = `${this.restUrl}api/pdfviewer`;
        this.gDocumentPath = this.pdfData as string;
        this.gAjaxRequestSettings = {
            ajaxHeaders: [
                {
                    headerName: "Companycode",
                    headerValue: "DEMO",
                },
                {
                    headerName: "X-JsonCase",
                    headerValue: "Camel",
                },
            ],
        };
        this.uiControl = new PdfViewer(this.getUiControlOptions(this.controlElement));
        this.uiControl.appendTo(this.gElementId);
        this.uiControl.element = document.getElementById("PdfViewer");
        this.uiControl.dataBind();
        this.uiControl.load(this.uiControl.documentPath, null);
    }




Im calling our own Rest API with the recipe gave on the github
https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service

The load method is called with the following params:

  1. action: "Load"
  2. document: "JVBERi0xLjcNCjIgMCBvYmoNClsvUERGIC9UZXh0IC9JbWFnZ
  3. elementId: "PdfViewer"
  4. hideEmptyDigitalSignatureFields: false
  5. isClientsideLoading: true
  6. isFileName: "false"
  7. showDigitalSignatureAppearance: true
  8. uniqueId: "Sync_PdfViewer_3deda481-8bf6-4e67-3ca5-345bb6ed5b29"
  9. zoomFactor: "1"
and a reponse is received

"{\"pageCount\":2,\"pageSizes\":{\"0\":\"816, 1056\",\"1\":\"816, 1056\"},\"hashId\":\"Pfc7gGABJxI7WQcjWlvbXw==\",\"documentLiveCount\":1,\"PdfRenderedFormFields\":[],\"uniqueId\":\"Sync_PdfViewer_3deda481-8bf6-4e67-3ca5-345bb6ed5b29\",\"RestrictionSummary\":[],\"digitalSignaturePages\":[],\"isTaggedPdf\":false,\"pageRotation\":[0,0]}"


However im getting weird undefined object within the Pdf library.