CODEWITHSUNDEEP
javascripthtmlreactjspdfweb-frontend
Sri Amin
Sri Amin

Reputation: 302

Can you display PDF files in a new tab within a React JS Application

I'm trying out React JS and making my first application. I wanted to make a button that would display a PDF file in a new tab, one that would appear in a new tab similar to how it would be viewed if it was in your local files. I've tried out several methods but all solutions don't really fit with my application. Is there also a way to do this completely front-end like putting the pdf files in the application files, as some solutions tell me to put it on the backend or server side.

Upvotes: 0

Views: 11311

Answers (2)

anonsaicoder9
anonsaicoder9

Reputation: 115

You can do this with pure HTML and a little pure JS:

<button onclick = "showpdf('./pdfs/myfile.pdf')"></button>
<script>
function showpdf(directory){
window.open(directory);
}
</script>

This is if you want it in a new tab.

Upvotes: 0

Mickey Gray
Mickey Gray

Reputation: 460

import react from  'react'
import file from "../../forms/f14134.pdf";


const myComponent = ()=>{
return
<div>
    <iframe
            style={{ width: "563px", height: "666px" }}
            src={file}
            type='application/pdf'
            title='title'
          />
</div>
export default myComponent

react will launch native browser version of the pdf viewer with your object, which if you dont have lot of you can import directly into react

Upvotes: 5

Related Questions