How to open PDF file in new tab using ReactJS ? Last Updated : 30 Sep, 2024 Comments Improve Suggest changes Like Article Like Report React JS, a commonly used JavaScript library for building user interfaces, sometimes requires opening PDF files in a new tab or window when a button is clicked. You can make this happen by bringing the PDF file into your React application as a module.Prerequisites:React JSFunctional Component in ReactApproachTo open pdf file in new tab using React JS we will be using the HTML anchor tag. We will pass the pdf url to href and use target _blank. It will open the file in a new tab on the provided URL.Steps to Create React ApplicationStep 1: Create a React JS application using the following command:npx create-react-app <project-name>Step 2: After creating your project folder, move into that directory using the following command:cd <project-name>Project Structure:Project StructureThe updated dependencies in package.json file will look like:"dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4",}Example: Let’s understand the implementation through the example: JavaScript // Filename - App.js import React from "react"; import samplePDF1 from "./SamplePDF.pdf"; import samplePDF2 from './Example2/SamplePDF.pdf'; const App = () => { return ( <> <center> <h1>Welcome to Geeks for Geeks</h1> <h3>Click on below link to open PDF file in new tab</h3> <a href={samplePDF1} target="_blank" rel="noreferrer"> Open First PDF </a> <br></br> <a href={samplePDF2} target="_blank" rel="noreferrer"> Open Second PDF </a> </center> </> ); }; export default App; Steps to Run the program: To run the application execute the below command from the root directory of the project:npm startOutput: Your web application will be live on “http://localhost:3000” Comment More infoAdvertise with us Next Article How to open PDF file in new tab using ReactJS ? kartikmukati Follow Improve Article Tags : JavaScript Web Technologies ReactJS React-Questions Similar Reads How to Open URL in New Tab using Angular ? In this article, we will learn How to open a link in a new tab using Angular. A Link is a connection from one web page to another web page. Generally, the anchor tag can be used to open URLs in a new tab in an elementary and straightforward manner. However, the window.open() method can also be utili 2 min read How to read PDF file using PHP ? In this article, we will learn how you can show/read PDF file contents on a browser using PHP.We have to include an external PHP file named "class.pdf2text.php". Include it in the required web page using PHP. Create an HTML form, in which we can choose a PDF file from your computer and also check wh 2 min read How To Download PDF file in ReactJS? Downloading files, such as PDFs, in a React application can be easily achieved using two main methods: Using the HTML DOM Anchor Object and using the fetch() Method. Both of these approaches allow you to download files and store them locally, but they differ in flexibility and complexity. Let's expl 4 min read How to open a component in a new tab in React JS ? React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. In this tutorial, you will understand how to open a new component in another tab while 2 min read How to Zoom in/Zoom out using React-PDF in React JS ? Zooming in or out in React-PDF within a React JS application is achieved by using the 'scale' prop inside the `<Page />` component. The 'scale' prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page. Prerequisites:React JSReact Functional Compone 2 min read How to Open URL in New Tab using JavaScript? HTML anchor tag is used to open URLs in a new tab using the target="_blank" attribute. In JavaScript, we have an inbuilt method window.open() which is used to open a new browser window or new tab depending on the browser settings. Using window.open() MethodTo open a new tab, we have to use _blank in 2 min read How to use Popper Component in ReactJS ? A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js.Prerequisite 3 min read How to upload files in firebase storage using ReactJS ? Firebase Storage is a powerful cloud storage solution provided by Google's Firebase platform. It allows developers to store and retrieve user-generated content, such as images, videos, and other files, in a secure and scalable manner. In this article, we will explore how to upload files to Firebase 2 min read How to create Tabs in ReactJS ? Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach.Prerequisites:NPM & Node.jsReact JSMaterial UIwe have these approaches to 4 min read How to use Popover Component in ReactJS ? A Popover is a graphical control which is a container-type element that hovers over the parent window, and it makes sure that all other interaction is blocked until it is selected. Material UI for React has this component available for us, and it is very easy to integrate.PrerequisitesA basic unders 2 min read Like