How to download files using axios
When response comes with a downloadable file, response headers will be something like
Content-Disposition: "attachment;filename=report.xls"
Content-Type: "application/octet-stream" // or Content-type: "application/vnd.ms-excel"
What you can do is create a separate component, which will contain a hidden iframe.
import * as React from 'react';
var MyIframe = React.createClass({
render: function() {
return (
<div style={{display: 'none'}}>
<iframe src={this.props.iframeSrc} />
</div>
);
}
});
Now, you can pass the url of the downloadable file as prop to this component, So when this component will receive prop, it will re-render and file will be downloaded.
Edit: You can also use js-file-download module. Link to Github repo
const FileDownload = require('js-file-download');
Axios({
url: 'http://localhost/downloadFile',
method: 'GET',
responseType: 'blob', // Important
}).then((response) => {
FileDownload(response.data, 'report.csv');
});
Hope this helps :)
node.js axios download file stream and writeFile
Actually, I believe the previously accepted answer has some flaws, as it will not handle the writestream properly, so if you call "then()" after Axios has given you the response, you will end up having a partially downloaded file.
This is a more appropriate solution when downloading slightly larger files:
export async function downloadFile(fileUrl: string, outputLocationPath: string) {
const writer = createWriteStream(outputLocationPath);
return Axios({
method: 'get',
url: fileUrl,
responseType: 'stream',
}).then(response => {
//ensure that the user can call `then()` only when the file has
//been downloaded entirely.
return new Promise((resolve, reject) => {
response.data.pipe(writer);
let error = null;
writer.on('error', err => {
error = err;
writer.close();
reject(err);
});
writer.on('close', () => {
if (!error) {
resolve(true);
}
//no need to call the reject here, as it will have been called in the
//'error' stream;
});
});
});
}
This way, you can call downloadFile()
, call then()
on the returned promise, and making sure that the downloaded file will have completed processing.
Or, if you use a more modern version of NodeJS, you can try this instead:
import * as stream from 'stream';
import { promisify } from 'util';
const finished = promisify(stream.finished);
export async function downloadFile(fileUrl: string, outputLocationPath: string): Promise<any> {
const writer = createWriteStream(outputLocationPath);
return Axios({
method: 'get',
url: fileUrl,
responseType: 'stream',
}).then(response => {
response.data.pipe(writer);
return finished(writer); //this is a Promise
});
}
Force download GET request using axios
You're getting empty PDF 'cause no data is passed to the server. You can try passing data using data object like this
axios .post(`order-results/${id}/export-pdf`, { data: { firstName: 'Fred' }, responseType: 'arraybuffer' }) .then(response => { console.log(response)
let blob = new Blob([response.data], { type: 'application/pdf' }), url = window.URL.createObjectURL(blob)
window.open(url) // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions })
How to download .zip file that i recieve from a HTTP response (axios PUT request)
I would suggest fetch over axios in concern of zip file because sometimes the response in axios request is not accurate and you might fall into currupted zip file while downloading, the best might be using a package called file-saver and fetch. I am posting this answer to help the developers to grab the concept only, the code is tested in React.
package file-saver:https://www.npmjs.com/package/file-saver
Now make any function according to your choice in react, I am assuming functional component so will write method according to functional component syntax.
note before using saveAs function you need to import from the installed package file-saver.
import { saveAs } from 'file-saver';
const downloadZipFileFromLaravel=()=>{
fetch(`your url`)
.then(res => res.blob())
.then(blob => saveAs(blob, 'Auto Photos.zip')) // saveAs is a function from the file-saver package.
.catch((err) => {
console.log(err.message);
});
}
at the end you need to connect the function with a button with onClick.
example
<button onClick={()=>downloadZipFileFromLaravel()}> </button>
Note: usage of file saver in pure javascript, you can check this:
How to use filesaver.js
For more information you can see the below discussion:
Reference: https://github.com/eligrey/FileSaver.js/issues/156
Download tar file using Axios
Problem #1 - Axios only supports responseType: "blob"
in the browser.
If your Express app needs to retrieve a binary file, use this
const axiosRes = await axios.get(`${API}/file`, {
headers: { Authorization: `Bearer ${token}` }, // no data, no content-type
responseType: "arraybuffer", // use instead of "blob"
});
Problem #2 - You are responding with JSON
Using this
res.send({ data: axiosRes.data });
will try and JSON stringify the binary file response which simply won't work. Instead, just send the raw response data
res.type(axiosRes.headers["content-type"]).send(axiosRes.data);
How to download file using axios and socks proxy agent
I can't see why this fixes the issue, but anyway I have fixed the problem by replacing "socks5" with "socks" in initializing proxy options.
So what i used first is below;
/* initialize proxy configuration */
const proxy_host = "127.0.0.1", proxy_port = 1080;
const proxy_options = `socks5://${proxy_host}:${proxy_port}`;
const proxy_agent = new SocksProxyAgent(proxy_options);
This used to cause connection timeout error, but when i change socks5 to socks, it worked.
There is distinct difference between original socks(socks4) and modern socks5, it must be declared obviously, mustn't I?
I don't know why developers of npm socks-proxy-agent didn't announce about this issue, so weird.
We still have to write correct protocol while using socks proxy with curl command, google-chrome, etc.
Hope this would help you guys when using this npm, be caureful in this :)
Related Topics
Download Array of Images as Byte Array and Convert to Images
Will iOS Launch My App into the Background If It Was Force-Quit by the User
Instantiate and Present a Viewcontroller in Swift
How to Create a Basic Uibutton Programmatically
Libc++Abi.Dylib: Terminating With Uncaught Exception of Type Nsexception (Lldb)
How to Resize the Uiimage to Reduce Upload Image Size
Swiftui Update Navigation Bar Title Color
How to Create a Multiline Uitextfield
Ios App Submission: Missing 64-Bit Support
How to Center Horizontally Uicollectionview Cells
Returning Data from Async Call in Swift Function
Detecting Which Uibutton Was Pressed in a Uitableview
Ios 9 Not Opening Instagram App With Url Scheme
Getting a Screenshot of a Uiscrollview, Including Offscreen Parts
How to Parse a Json File in Swift
How to Change the Status Bar Background Color and Text Color on iOS 7