Easy fix is to put the pdf file in your public folder and set href="resume.pdf".
You can also create a folder named resume in your public and put the pdf file inside your resume folder.
<a href="/resume/resume.pdf" download><strong>Download my Resume!</strong></a>
Answer from balumn on Stack OverflowEasy fix is to put the pdf file in your public folder and set href="resume.pdf".
You can also create a folder named resume in your public and put the pdf file inside your resume folder.
<a href="/resume/resume.pdf" download><strong>Download my Resume!</strong></a>
The trick is to Link it to the file which would be stored in the public folder.
Then :
Create a folder in the Public Directory of Your react app called "files"(it doesn't need to be called files in your public directory but for this example, you can do it like this).
Store the file within the folder
<Link to="/files/file.pdf">Download</Link>
Try this
<Link to="/files/manual.pdf" target="_blank" download>Download</Link>
Where /files/manual.pdf is inside your public folder
Try this one https://www.npmjs.com/package/file-saver (FileSaver.js)
//function for saving file
const saveManual = () => {
fileSaver.saveAs(
process.env.REACT_APP_CLIENT_URL + "../assets/img/manual.pdf",
"manual.pdf"
);
};
//button for calling
<button onClick={saveManual}>
Manual
</button>
Figured it out, posting in case this finds useful to someone else... If you are on android trying to download then open a file and it opens blank you most likely don't have permissions. This is regardless of which file viewing and downloading tools you use. https://github.com/joltup/rn-fetch-blob/issues/483#issuecomment-761763626
Solution I used:
RNFS.downloadFile(options)
.promise.then(()=> PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
]))
.then((result) => {
const isGranted = result[PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE] === 'granted'
&& result[PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE] === 'granted';
isGranted ? FileViewer.open(filePath, {showOpenWithDialog: true, showAppsSuggestions: true}) : console.log('Declined')})
.then(() => {
console.log('File should have opened');
})
export const downloadFile = async (path, url) => {
const filePath = RNFS.DocumentDirectoryPath + '/' + path + '/' +
'video.mp4';
RNFS.downloadFile({
fromUrl: url,
toFile: filePath,
background: false,
cacheable: false,
connectionTimeout: 60 * 1000,
readTimeout: 120 * 1000,
}).promise.then((r) => {
console.log('promise result: ', r);
FileViewer.open(filePath, {showOpenWithDialog: true,
showAppsSuggestions: true}) : console.log('Declined')});
});
};
tldr; fetch the file from the url, store it as a local Blob, inject a link element into the DOM, and click it to download the Blob
I had a PDF file that was stored in S3 behind a Cloudfront URL. I wanted the user to be able to click a button and immediately initiate a download without popping open a new tab with a PDF preview. Generally, if a file is hosted at a URL that has a different domain that the site the user is currently on, immediate downloads are blocked by many browsers for user security reasons. If you use this solution, do not initiate the file download unless a user clicks on a button to intentionally download.
In order to get by this, I needed to fetch the file from the URL getting around any CORS policies to save a local Blob that would then be the source of the downloaded file. In the code below, make sure you swap in your own fileURL, Content-Type, and FileName.
fetch('https://cors-anywhere.herokuapp.com/' + fileURL, {
method: 'GET',
headers: {
'Content-Type': 'application/pdf',
},
})
.then((response) => response.blob())
.then((blob) => {
// Create blob link to download
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
`FileName.pdf`,
);
// Append to html link element page
document.body.appendChild(link);
// Start download
link.click();
// Clean up and remove the link
link.parentNode.removeChild(link);
});
This solution references solutions to getting a blob from a URL and using a CORS proxy.
Update As of January 31st, 2021, the cors-anywhere demo hosted on Heroku servers will only allow limited use for testing purposes and cannot be used for production applications. You will have to host your own cors-anywhere server by following cors-anywhere or cors-server.
This is not related to React. However, you can use the download attribute on the anchor <a> element to tell the browser to download the file.
<a href='/somefile.txt' download>Click to download</a>
This is not supported on all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a