DEV Community

Cover image for DISPLAY A PDF FILE IN REACT APPLICATION WITHOUT ANY EXTRA PACKAGE.
Jonathan Zihindula
Jonathan Zihindula

Posted on

DISPLAY A PDF FILE IN REACT APPLICATION WITHOUT ANY EXTRA PACKAGE.

INTRODUCTION

Welcome to this tutorial, here your are going to understand how to display PDF in your react application using google Drive service.
We are going to create a simple react application in which we are going to display our PDF file stored in google drive. If you don’t have a google drive account click here to create one.
Once that’s done, you have your google drive account and offcourse basic skills in react, you are able to follow this tutorial.

CREATE REACT APP

You can create a react application and install all the packages by your own, however you can use the npx create-react-app <project name> command line that installs all basics components and packages we need.

files generated by create-react-app

GET A PDF FILE FROM GOOGLE DRIVE

If you don’t have a pdf file in your google drive and don’t know how to upload one click here and learn how to upload a file in google drive.

Once our pdf file is uploaded in google drive click on that file to display it, then go to menu and open it in a new window.

open PDF in new window

In the new window, click again on menu icon , then to embed item.

get the HMTL code by clicking to embed item

HTML code to embed in react app

After that, let's copy this HTML code and past it in app.js file in our react application.

code pasted in react-app

Here we are, let’s write npm start command line to run our application.

react app running

CONCLUSION

Now you are able to display a PDF file stored in google drive in react application without any extra package.
Thanks for reading

Top comments (0)