React - How to open PDF file as a href target blank
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>
</div>
);
}
}
export default Download;
Also you can use require
function directly:
import React, { Component } from 'react';
class Download extends Component {
render() {
return (
<div className="App">
<a href={require('../Documents/Document.pdf')} target="_blank">Download Pdf</a>
</div>
);
}
}
export default Download;
I had to make a function to open the pdf in the new tab actually :D
import Pdf from "../../documents/resume.pdf";
onResumeClick() {
window.open(Pdf);
}
render() {
return (
<a onClick={this.onResumeClick}>
Resume
</a>
)}