Load new PDF from URL in existing viewSDKCLient

New Here ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

Hi, 

I am basing my code on the ViewSDKClient example. The adobeDCView is created in the constructor of ViewSDKClient, and the ViewSDKClient contains the following function:

previewFile(viewerConfig) {
    const previewFilePromise = this.adobeDCView.previewFile({
      content: {
        location: {
          url: viewerConfig.url,
          /* If the file URL requires some additional headers, then it can be passed as follows:-
          headers: [{ key: "<HEADER_KEY>", value: "<HEADER_VALUE>" }]*/
        },
      },
      metaData: {
        fileName: viewerConfig.fileName,
        id: viewerConfig.fileId,
      }
    }, viewerConfig);
    console.log(`[adobe ${this.config.divId}] file promise:`);
    console.log(previewFilePromise);  // ******* see below ***** 
    return previewFilePromise;
  }

I want to programmatically change from one PDF file to the next. This works when I recreate the ViewSDKClient from scratch with a new URL:

async componentDidMount() {
    console.log(`[adobe ${this.props.divName}] loading ${this.props.fileUrl} (${this.props.fileName})`)
    const viewerConfig = this.configFromProps();
    this.viewSDKClient = new ViewSDKClient(this.props.user, this.upload, this.props.divName);
    this.viewSDKClient.ready().then(() => {
      this.viewSDKClient.previewFile(viewerConfig);
    });
  }

When doing it this way, the promise marked ***** in the first code snippet shows up as fulfilled.

 

However, loading the PDF takes quite a while, and I thought I could reduce this time if I updated from one URL to another one in the existing ViewSDKClient and adobeDCView, like this:

componentDidUpdate(prevProps) {
    if (this.props.fileUrl && (!prevProps.fileUrl || (this.props.fileUrl !== prevProps.fileUrl))) {
      console.log(`[adobe ${this.props.divName}] will change from ${prevProps.fileUrl} (${prevProps.fileName}) to ${this.props.fileUrl} (${this.props.fileName})`)
      const viewerConfig = this.configFromProps();
      this.viewSDKClient.ready().then(() => {
        console.log(`[adobe ${this.props.divName}] ready to change from ${prevProps.fileUrl} (${prevProps.fileName}) to ${this.props.fileUrl} (${this.props.fileName})`)
        this.viewSDKClient.previewFile(viewerConfig);
      });
    }
  }

There are no error messages, but the content of the PDF frame is not updated, and the promise marked **** in the first code snippet shows up as pending.

 

Is there some way to load a different PDF file within an existing adobe DCView, or do I have to recreate it from scratch every time I want to show a different PDF file?

Views

120

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

correct answers 1 Correct answer

Community Expert , Apr 15, 2021 Apr 15, 2021

You can't swap out the PDF that's being viewed. You need to recreate the entire object. That said, rather than using content.location.url, if you pass the PDF as a Promise that resolves to an ArrayBuffer, you can pre-fetch the PDF making it appear to load faster.

 

I have an example of delaying the display of the PDF until it's rendered at this CodePen. You can use this example to see how to fetch the PDF and load it into a view.

Likes

Translate

Translate
Community Expert ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

LATEST

You can't swap out the PDF that's being viewed. You need to recreate the entire object. That said, rather than using content.location.url, if you pass the PDF as a Promise that resolves to an ArrayBuffer, you can pre-fetch the PDF making it appear to load faster.

 

I have an example of delaying the display of the PDF until it's rendered at this CodePen. You can use this example to see how to fetch the PDF and load it into a view.

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
Resources