I want to show you an easy and simple way to display PDF files using React in the browser. I will be using an Api called Adobe PDF Embed API . This Api is capable of rendering PDF files given an URL or a local file inside the project.

To get started, create a simple React application using Create React App. To do this you can run the following commands:

npx create-react-app react-pdf-viewer-demo
cd react-pdf-viewer-demo
npm start

After this, You’ll need a client ID to use the Adobe PDF Embed API. To get one, click HERE , and complete the workflow .

To get client ID via following steps:-

• Step 1 : Create new credentials .

• Step 2 : Complete Signup and Signin process.

• Step 3 : Choose a service PDF Embed API and enter other details to create credentials .

Now You will get Client ID

The final project structure will look like this:

To render the PDF file, you need to create a Page component. Sample code:

Lets Start,The first step is to add Adobe PDF Embed APi SDK inside public/index.html after the body tag end.

 <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

After that insert the code block inside src/index.js.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App url="https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf" />
  </StrictMode>,
  rootElement
);

Then insert the code block inside src/app.js

import React from "react";
import ViewSDKClient from "./ViewSDKClient.js";
const App = ({ url }) => {
  const loadPDF = () => {
    const viewSDKClient = new ViewSDKClient();
    viewSDKClient.ready().then(() => {
      viewSDKClient.previewFile(
        "pdf-div",
        {
          showAnnotationTools: false,
          showLeftHandPanel: false,
          showPageControls: false,
          showDownloadPDF: false,
          showPrintPDF: false
        },
        url
      );
    });
  };
  return (
    <div>
      <div
        id="pdf-div"
        className="full-window-div"
        onDocumentLoad={loadPDF()}
      ></div>
    </div>
  );
};
export default App;

Then instert the code block inside src/ViewSDKClient.js

class ViewSDKClient {
  constructor() {
    this.readyPromise = new Promise((resolve) => {
      if (window.AdobeDC) {
        resolve();
      } else {
        document.addEventListener("adobe_dc_view_sdk.ready", () => {
          resolve();
        });
      }
    });
    this.adobeDCView = undefined;
  }
  ready() {
    return this.readyPromise;
  }
  previewFile(divId, viewerConfig, url) {
    const config = {
      clientId: "*************************"    //Enter your Client ID here
    };
    if (divId) {
      config.divId = divId;
    }
    this.adobeDCView = new window.AdobeDC.View(config);
    const previewFilePromise = this.adobeDCView.previewFile(
      {
        content: {
          location: {
            url: url
          }
        },
        metaData: {
          fileName: "Menu.pdf",
          id: "6d07d124-ac85-43b3-a867-36930f502ac6"
        }
      },
      viewerConfig
    );
    return previewFilePromise;
  }
  previewFileUsingFilePromise(divId, filePromise, fileName) {
    this.adobeDCView = new window.AdobeDC.View({
      clientId: "************************",     //Enter your Client ID here
      divId
    });
    this.adobeDCView.previewFile(
      {
        content: {
          promise: filePromise
        },
        metaData: {
          fileName: fileName
        }
      },
      {}
    );
  }
  registerSaveApiHandler() {
    const saveApiHandler = (metaData, content, options) => {
      console.log(metaData, content, options);
      return new Promise((resolve) => {
        setTimeout(() => {
          const response = {
            code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
            data: {
              metaData: Object.assign(metaData, {
                updatedAt: new Date().getTime()
              })
            }
          };
          resolve(response);
        }, 2000);
      });
    };
    this.adobeDCView.registerCallback(
      window.AdobeDC.View.Enum.CallbackType.SAVE_API,
      saveApiHandler,
      {}
    );
  }
  registerEventsHandler() {
    this.adobeDCView.registerCallback(
      window.AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
      (event) => {
        console.log(event);
      },
      {
        enablePDFAnalytics: true
      }
    );
  }
}
export default ViewSDKClient;

That’s it for today.

Sample Code

The full project code can be found here github

Conclusion

PDF Embed really allows for a lot of flexibility to leverage PDFs with you websites. There is a lot more you can do with it from Analytics, Event Listeners, and more which you can learn more about in this documentation.

We want to hear from you Once you have a look at the PDF Embed, we’d love to hear your thoughts! Get involved in the Adobe Document Cloud Forum to give your feedback, or reply to this article!

Thank you for reading…!!!