• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

Community Beginner ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

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;

 

 

TOPICS
Acrobat SDK and JavaScript

Views

523

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

LATEST

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_rep... 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines