React - How to open PDF file as a href target blank

javascript open pdf in new tab
react open file in new tab
react-pdf failed to load pdf file
react upload pdf
react print pdf
react-pdf responsive

This mundane task fairly simple on static views, isn't complying with React.

Can someone advise me how to open a pdf file as a href on a new tab?

Here's my code using react-bootstrap and react-router:

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>

The external link to google works fine.

The pdf (saved on same level directory as the code above) doesnt.

When I click on the pdf link it redirects me to my "404 catch all" route.

        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />

EDIT: Solution here: answered by Link_Cable

Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the target = "_blank".

import React, { Component } from 'react';
import Pdf from '../Documents/Document.pdf';

class Download extends Component {

  render() {

    return (
      <div className = "App">
        <a href = {Pdf} target = "_blank">Download Pdf</a>

export default Download;

Create a URL to open a PDF file at a specific page, How do I open a PDF in a new tab or window instead of downloading it? Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. React - How to open PDF file as a href target blank

I placed the following in the header of the component I needed it in. The document was stored in Documents folder under src.

import Pdf from '../Documents/doc.pdf';

And then used the imported document in the tag using href.

<a href = {Pdf}>Resume</a>

Worked for me!

How To Use The <a> To Make Links & Open Them , OS: macOS High Sierra React-pdf version: "@react-pdf/renderer": //FIX <a href​={(url != null) ? url : ""} target="_blank">Open in new tab</a>  I have a set of pdf files sitting in a folder in my project. All I need to do is to create a link to these PDF files and view them in browser or download it. I use React Router 4 and React 16 and create-react-app bootstrapping tool.

I had to make a function to open the pdf in the new tab actually :D

import Pdf from "../../documents/resume.pdf";
onResumeClick() {;

render() { 
return (
   <a onClick={this.onResumeClick}>

How to open rendered PDF in a new tab · Issue #318 · diegomura , The returned anchor tag should open the PDF in new tab when clicked. is rendered inside the pdf to have target="_blank" so clicking on the link from opening the entire pdf document in a new tab as described by @jp06  Besides, links which open in a new tab are also bad for accessibility if you don’t provide hints and ARIA attributes. Still, there are cases where you want or need to link to external pages.

Client side only? So there is no web server to host your web site? If you have a webserver then you could return the raw pdf content content back to the browser as "application/pdf" content type. Client side only would be to specify a relative path like

<a href="../FolderName/samba.pdf"> 

Open renderer link on new window · Issue #645 · diegomura/react-pdf, If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to <a href="#0" onclick="'​ download="Nice Name of Document.pdf">HTML5 download attribute<​/a> HTML a href target _blank JS HTML5 download attribute  What does Target Blank do? This HTML is used to make a hyperlink location open in a new browser window or a new tab depending on the browser, version or user settings. When the user clicks on the link a new browser window will open in a new tab with the web address URL you indicated.

I have solved that by creating _someFolder in the public folder and then in the component:

import {pdfFile} from "/_someFolder/pdfFile.pdf";


<div className="headerProfile-menu-list" onClick={() =>}><i className="mdi mdi-help-circle"></i> Help</div>


that prevent by adding hashes to the filename when serviceWorker is used.

Open PDF in new tab (and force download), I'm trying to open up a pdf in a new tab automatically when clicking on a link. How would I go <a target="_blank" href="yourfile.pdf">pdf</a>. Solution It has a embedeed viewer to open pdf files in your browser. Solution. Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username. Email Address. Password. Sign up for GitHub. By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

How to open pdf in new tab, You Have Set Target As '_Blank' and code behind Get Path USing the Server.​mapPath and Then Respose.Redirect ("Your Path"). Although the ffile:////.exe used to work (for example - some versions of early html 4) it appears html 5 disallows this. Tested using the following:

[Solved] Link button onclick open pdf file in new tab, Like it or not, target="_blank" is a change in default behavior. It is also worth noting that users can force a link to open in a new window/tab by [Meta #A Bad Reason: The link is to a PDF from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack. As far as PDFs are concerned, I'm 50/50 on that one. Opens the linked document in the same frame as it was clicked (this is default) _parent. Opens the linked document in the parent frame. _top. Opens the linked document in the full body of the window. framename. Opens the linked document in a named frame. HTML <a> tag.

When to use target="_blank", Open .pdf files in new tab and not download - Javascript. help console.log(f); var files = ''; $.each(f, function(index, value){ var filesHtml = "<div class='file'>" + "<​a href='" + value. Try to put the “target=_blank” on the <a> tag instead of the <​div>. I want to build web, iOS, and Android apps using React + React Native. Try to open new tab on button click .. for this refer this link After that on the page load event of newly opened page, do your operations for opening pdf(in same page from which function is executed)

  • You don't have a route for samba.pdf, so it's falling through to your catch all. You'll either need to set your server up to serve that file first or add a route that handles it.
  • This is a client-side only app. So a dedicated route for "/file.pdf" should do the trick? Then, what component would I reference, since all I want is to load a pdf file 'externally'?
  • Explanation added.
  • is it open without download?
  • Yes, pdf will open on a new tab on Chrome/Explorer/Firefox/Safari.
  • Adding the a tag above hasn't changed the behavior. It works fine on a plain index.html but not inside the React Bootstrap ecosystem. Plus the href needs to exist inside the <MenuItem/> Component.