Load new PDF from URL in existing viewSDKCLient

[Matthias5C06]

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?

[Joel_Geraci · Accepted solution]

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.