Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 27, 2022 02:41 pm GMT

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 dont have a google drive account click here to create one.
Once thats 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 dont have a pdf file in your google drive and dont 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, lets 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


Original Link: https://dev.to/jonathz/display-a-pdf-file-in-react-application-without-any-extra-package-510f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To