javascript - Can you display PDF files in a new tab within a React JS Application - Stack Overflow

admin管理员组

文章数量:1397134

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 pletely 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.

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 pletely 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.

• javascript
• html
• reactjs
• pdf
• web-frontend

Share Improve this question Follow asked Aug 28, 2020 at 3:02 Sri AminSri Amin 30222 gold badges44 silver badges99 bronze badges 3

• If you have tried several things, enumerate them here and state how they didn't work. – zero298 Commented Aug 28, 2020 at 3:03
• most of them were making my own PDF Viewer but I don't believe it would fit well with my application, another was for vanilla javascript and html but I'm not sure it would apply to JSX. I'm mainly looking for something that will display based on the browser, like how I explained above. – Sri Amin Commented Aug 28, 2020 at 3:52
• You could import the pdf as you would a regular ponent, and then use an a tag to open it in a new window – Kenny John Jacob Commented Aug 28, 2020 at 5:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.

本文标签： javascriptCan you display PDF files in a new tab within a React JS ApplicationStack Overflow