Connect web parts in SharePoint Online

When you add a modern page to a site, you add and customize web parts, which are the building blocks of your page. You can connect some web parts to each other to create an interactive and dynamic experience for your page viewers. 

For example, you can connect a Document library web part to a File viewer web part. When a user clicks a file name in the Document library list, the File viewer shows the contents of that specific file. Or, connect a List web part or Document library web part to an Embed web part, and add custom code for a variety of dynamic experiences.

Go to Site Contents >> New >> Page

Enter Page Title, click on + icon (as shown below).

First select a Document Library web part.

next add the File Viewer web part.

Note: If you're adding the File viewer web part for the first time, the Recent documents pane will open. Click Cancel on the bottom right of this pane.

Click Edit web part button on the left side of the File viewer web part.

Click the ellipses (...) at the top right of the property pane, and then click Connect to source button.

Under Connect to source, select the document library you want to use from the drop down list. Click the X at the top of the pane to close it.

 Click Save as draft at the top of the page.

Test your connection by selecting a document from the Document library you chose. You should see the document displayed in the File viewer web part.

When you're ready for your audience to see the page, click Publish at the top right of the page.

You should be able to preview the selected Document as shown below.