Skip to main content
Participant
May 25, 2021
Question

PDF Embed API - Intermittently Stuck Loading PDF at "Opening Document 0%"

  • May 25, 2021
  • 1 reply
  • 1720 views

I am using the PDF Embed API to display a local PDF and am experiencing an issue where the PDF Viewer is stuck on "Opening Document 0%" about half the time that I open it.  I've followed the sample for React provided by Adobe.  I've tried using a URL as well as a promise.  I've tried doing a timeout call to see if it was an async timing issue but it still happens.  Has anyone else experienced this?  I know it's not a problem with the PDF because half the time it loads correctly and everything is fine.  

 

React Typescript Implementation:

 

const Bill: React.SFC<BillProps> = (props) => {
    const bill = props.billDetails;
        
    const viewSDKClient = new ViewSDKClient();
    viewSDKClient.ready().then(() => {
        //const blob = await getBillImageLocation(String(bill.controlNumber));
        //const url = window.URL.createObjectURL(blob);
        viewSDKClient.previewFileUsingFilePromise("pdf-div", getBillImageArrayBuffer(String(bill.controlNumber)), bill.controlNumber + ".pdf");
        viewSDKClient.registerEventsHandler();
    });

    async function handleOpenBillImageViewerTab(e: React.UIEvent<HTMLElement>) {
        // Call preventDefault to keep page from refreshing on form submit
        e.preventDefault();
        
    }
    return (
        <Container fluid onLoad={handleOpenBillImageViewerTab}>
            <Card>
                <CardBody>
                    <Row>
                        <Col xs={3}><label>Control Number:</label> {bill.controlNumber}</Col>
                        <Col xs={3}><label>Provider:</label> {bill.provider}</Col>
                        <Col xs={3}><label>Bill Total:</label> {bill.billTotal}</Col>
                        <Col xs={3}><Input type="button" onClick={handleOpenBillImageViewerTab} value='Open Bill Image' /></Col>
                    </Row>
                    <Row>
                        <Col xs={6}>
                            {bill.accountInvoices.map((invoice, index) => <AccountInvoice accountInvoice={invoice} key={index} />)}
                        </Col>
                        <Col xs={6}>
                            <div id="pdf-div" className="full-window-div" />
                        </Col>
                    </Row>
                </CardBody>
            </Card>
        </Container>
    );
};

export default Bill;

 

 Fetch:

 

export default async function getBillImageArrayBuffer(controlNumber: string): Promise<ArrayBuffer> {

    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    };
    const response = await fetch('api/Bill/GetBillImageLocation?controlNumber=' + controlNumber, { method: 'POST', headers: headers });
    return await response.arrayBuffer();
}

 

API Controller:

 

[HttpPost]
        [Route("GetBillImageLocation")]
        //[Authorize(Policy = "AD.User")]
        public async Task<ActionResult> GetBillImageLocation(string controlNumber)
        {
            try
            {
                var billImageLocation = _billQuery.GetBillImage(controlNumber);
                var provider = new FileExtensionContentTypeProvider();
                if (!provider.TryGetContentType(billImageLocation, out var contentType))
                {
                    contentType = "application/octet-stream";
                }
                //return new JsonResult(result);
                var bytes = await System.IO.File.ReadAllBytesAsync(billImageLocation);
                return File(bytes, contentType, Path.GetFileName(billImageLocation));
            }
            catch (System.Exception ex)
            {
                _logger.LogError(ex, "Error loading the bill data");
                throw;
            }
        }

 

Adobe SDK Implementation:

 

class ViewSDKClient {
    constructor() {
        this.readyPromise = new Promise((resolve) => {
            if (window.AdobeDC) {
                resolve();
            } else {
                /* Wait for Adobe Document Services PDF Embed API to be ready */
                document.addEventListener("adobe_dc_view_sdk.ready", () => {
                    resolve();
                });
            }
        });
        this.adobeDCView = undefined;
    }

    ready() {
        return this.readyPromise;
    }
previewFileUsingFilePromise(divId, filePromise, fileName) {
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View({
            /* Pass your registered client id */
            clientId: "2e64883835ea45b0879a04088a7c6933",
            /* Pass the div id in which PDF should be rendered */
            divId,
        });

        /* Invoke the file preview API on Adobe DC View object */
        this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* pass file promise which resolve to arrayBuffer */
                promise: filePromise,
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: fileName
            }
        }, {});
    }
}

export default ViewSDKClient;

 

 

This topic has been closed for replies.

1 reply

Bernd Alheit
Community Expert
Community Expert
May 26, 2021

Looks like that you are posting this in the wrong forum.

Try following forum:

https://community.adobe.com/t5/document-services-apis/bd-p/Document-Cloud-SDK?page=1&sort=latest_replies&filter=all